Update ng-model data with inputs

Question

I'm new in angular and I have a problem.

I want get promise data from DB and show it by input.

This is my input:

    // not editable
    <input type="text" ng-model="currentMedCenter.name"/>

This is my controller with 'currentMedCenter' model:

    function AccountProfileController($scope, medicalCenterService, doctorService) {
        //get information from singleton service
        $scope.currentMedCenter = medicalCenterService.currentMedCenter;
    }

I get data from DB by $http.get, which wrapped in singleton service.

This is singleton medicalCenterService:

.factory('medicalCenterService', function (MedicalCenterResource) {

    var medicalCenterService = {};

    medicalCenterService.currentMedCenter = MedicalCenterResource.getCurrentMedicalCenter();

    return medicalCenterService;
})

This is query to server: function 'getCurrentMedicalCenter()':

getCurrentMedicalCenter: function () {
      var deferred = $q.defer();

            $http.get('Api/MedicalCenter/GetCurrentMedicalCenter').success(function(data) {
                deferred.resolve(data);
            });

            return deferred.promise;
}

After query on server, I get JSON object as follow:

  {
    "id": 1,
    "name": "Medical center #1"
  }

This object successfully stored in singleton service medicalCenterService.currentMedCenter. And medical center name show in input on UI-side.

I want update my 'currentMedcenter' model, but when I try to edit value in input, I can not change anything in it. I can not add new symbol or delete previous.

I'm using 1.0.8 angular version.

Answer 1

First, rewrite currentMedCenter to be :

getCurrentMedicalCenter: function () {
   return $http.get('Api/MedicalCenter/GetCurrentMedicalCenter');
}

No need to create a new promise here.

Then in your factory change :

medicalCenterService.currentMedCenter = MedicalCenterResource.getCurrentMedicalCenter();

to be :

MedicalCenterResource.getCurrentMedicalCenter().success(function(data) {
   medicalCenterService.currentMedCenter = data;
});

So you set currentMedCenter to be the value of the promise rather than the promise itself.

EDIT :

The next problem is that you are binding the input to currentMedCenter. At first this is just an empty object. Then when the http service returns the variable currentMedCenter is then being changed to point to the new data, meanwhile the input still has the value of the pointer to the old data and so doesn't get the update.

To fix this you need to pass an object to the controller that isn't going to change. The object should contain a property that points to currentMedCenter. As this object doesn't change the controller will pick up the fact that the objects property does change.

Pointers can catch you out, even in Javascript!

Change the factory to be :

.factory('medicalCenterService', function (MedicalCenterResource) {

    var medicalCenterService = {currentMedCenter: {data: {}}};
    MedicalCenterResource.getCurrentMedicalCenter().then(function(d) {
        medicalCenterService.currentMedCenter.data = d;    
    });
    return medicalCenterService;
})

Note how the returned object now has a property data and it is this property that gets set when the promise resolves.

Then when binding the input :

<input type="text" ng-model="currentMedCenter.data.name"/>

See this jsFiddle