Force update on rzModule sliders in AngularJS

Question

I have a few sliders in an angularJS app. What I try to achieve is when the user change the option on a select dropdown, the sliders should get an update with new values from a RestAPI.

This example is for one of the sliders, but the rest are the same.

Creating the slider on controller

myCtrl.ageSlider = {
            value: 17,
            options: {
                showSelectionBar: true,
                ceil: 38,
                hideLimitLabels: true,
                floor: 17,
                onChange: myCtrl.getResults,
                getPointerColor: function(value) {
                    return '#FFCF00'
                },
                getSelectionBarColor: function(value) {
                    return '#FFCF00'
                }
            }
        };

The update function on controller which is called on ng-change of the select

myCtrl.updateSliders = function () {

      //other sliders here that don't need a call on API

      StaffServices.getMedic(myCtrl.selected.id,
      function(response) {
        myCtrl.ageSlider.value = parseInt(response.data.age);
        myCtrl.getResults();
      },
      function(response) {
        console.log('Something went wrong on medic process');
      });

    }

And the getResults() function which call a service

myCtrl.getResults = function() {
        myCtrl.results = myService.myUpdatesCalc(passSomeValues);
}

When I manually change the slider from the user interface, the onChange fires the getResults function. Spending hours on this and cannot find the reason. Any help?

Edit: This is the service getMedic to avoid any confusion

service.getMedic = function(id, onSuccess, onError) {
          $http.get(API_Base + 'api/staff/medic?id='+id,
          {
              headers: { 'Authorization': 'Bearer '+$cookies.get('token')}
          }).
          then(function(response) {

              onSuccess(response);

          }, function(response) {

              onError(response);

          });
      }

Answer 1

Angular $http return promises, and hence your values are not updated. You will need to handle the promises, and then update it at the callback function:

myCtrl.getResults = function() {
  myService.myUpdatesCalc(passSomeValues) //this is your REST API, will return a promise
   .then(function(response) { //this is the callback function to handle the successful ajax
    myCtrl.results = response.data; //update your results here!
  }, function(error) { //this is the callback function to handle the failed ajax
    console.log('error')
  })
}