angular ui bootstrap - AngularJS ui modal not working properly -

i'm building application on angularjs , i'm using ui-modal, instead of creating separete views edit , create (which identical) want 2 instances of modal operating on same view. did

i have 1 main controller has functions create , edit, both of them opens own instance of modal :

(function() {     'use strict';      angular.module( 'app.projects' )      .controller('projectscontroller', projectscontroller );       projectscontroller.$inject = ['$scope', '$modal'];      function projectscontroller( $scope, $modal )      {          $scope.edit = function( projectid )            {             var modalinstance = $modal.open(             {               templateurl: 'modules/projects/view/modal/project.html',               controller: 'editprojectmodalinstcontroller',               size: 'lg',               resolve: {                 projectid: function(){                     return projectid;                 }               }             });           };          $scope.create = function()            {             var modalinstance = $modal.open(             {               templateurl: 'modules/projects/view/modal/project.html',               controller: 'createprojectmodalinstcontroller',               size: 'lg',             });           };     }; })(); 

here modal instances controllers: editprojectmodalinstancecontroller

(function() {     'use strict';      angular.module( 'app.projects' )      .controller( 'editprojectmodalinstcontroller', editprojectmodalinstcontroller );      editprojectmodalinstcontroller.$inject = ['projectsservice', '$scope', '$modalinstance', 'projectid'];      function editprojectmodalinstcontroller(projectsservice, $scope, $modalinstance, projectid)      {         $scope.project = function(){return projectsservice.project;};          $scope.statuses = [             {name: 'active', value: 0},             {name: 'finished', value: 1}         ];          $scope.cancel = function () {};          $scope.save = function(){};      };   })(); 

and here createprojectmodalinstancecontroller.js

(function() {     'use strict';      angular.module( 'app.projects' )      .controller( 'createprojectmodalinstcontroller', createprojectmodalinstcontroller );      createprojectmodalinstcontroller.$inject = ['projectsservice', '$scope', '$modalinstance'];      function createprojectmodalinstcontroller( projectsservice, $scope, $modalinstance )      {         $scope.project = function(){return {};};          $scope.statuses = [             {name: 'active', value: 0},             {name: 'finished', value: 1}         ];          $scope.cancel = function(){};          $scope.save = function(){};     }; })(); 

so each instance controller has same function, should different things depends on action(edit or create).

and here actual template: project.html

<div class="modal-body">     <form class="form-horizontal">         <div class="form-group">             <label for="inputname" class="control-label col-xs-2">name</label>             <div class="col-xs-10">                 <input type="text" class="form-control" id="inputname" placeholder="name" ng-model="project().name">             </div>         </div>         <div class="form-group">             <label for="inputname" class="control-label col-xs-2">status</label>             <div class="col-xs-10">                 <select class="form-control" ng-model="project().status">                     <option ng-repeat="status in statuses" value="{{status.value}}">{{status.name}}</option>                 </select>             </div>         </div>     </form> </div> <div class="modal-footer">     <button ng-click="save()"> save </button>     <button ng-click="cancel()">cancel</button> </div> 

and issue, problem here edit functionality working fine, when create modal opened, can not edit field. i'm felling i'm doing wrong here, in sense of design principals , appreciate if more experience point out correct way of doing type of thing.

the issue having not being able edit create form because $scope.project function returning new object every time called. means action take overwrite saved in object. remedy assign empty object $scope.project instead of using function:

$scope.project = {}; 

and reference in template so:

<input type="text" class="form-control" id="inputname" placeholder="name" ng-model="project.name"> 

the reason works editing because function returns same object projectsservice instead of creating new 1 each time.

once have working can begin refactoring drying controllers. there several ways approach have different resolve options create , edit; create have null project id , edit have editing project id.

create:

$scope.create = function() {    var modalinstance = $modal.open({      templateurl: 'modules/projects/view/modal/project.html',      controller: 'projectformmodalinstcontroller',      size: 'lg',      resolve: {         projectid: null      }    }); }; 

edit:

$scope.edit = function() {    var modalinstance = $modal.open({      templateurl: 'modules/projects/view/modal/project.html',      controller: 'projectformmodalinstcontroller',      size: 'lg',      resolve: {         projectid: projectid      }    }); }; 

this way can use same controller (i named projectformmodalinstcontroller can choose own generic name) , controller or service can initialize new project if id not exist or return project if id present.

function projectformmodalinstcontroller( projectsservice, $scope, $modalinstance, projectid ) {    if ( projectid === null ) {     $scope.project = {};   } else {     $scope.project = projectsservice.project;   }    // ...some controller code    $scope.save = function(){      if ( project.id === null ) {         // create project      } else {         // update project      }   }; };