with Angular JS, how can I trigger code to be executed after the view and controller have synced a particular change?

Question

with Angular JS, how can I trigger code to be executed after the view and controller have synced a particular change?

specifically, I'm AJAXing in some date ranges into a pair of SELECTs (maintained with an Angular ng-repeat), which I'm then turning into a slider using jQuery UI's selectToUISlider. I assume selectToUISlider's behavior is undefined if the SELECTs it's operating on are modified while it's running. is there a way to ensure that it is called only after Angular JS has finished updating? I haven't encountered any problems yet, but I'm not sure I'm just lucky, or haven't had my computer lag at just the right moment, etc...

I can think of two solutions, but neither seems very good:

don't use the ng-repeater; build the SELECTs with jQuery. but that'd be sad to have to do.
delay the call to selectToUISlider using setTimeout. but that seems... inelegant.

javascript
jquery
angularjs

Answer 1

I don't know how selectToUISlider works, but you want a directive. In that directive, $watch for changes to the list and update the slider however it's supposed to be done.

http://docs.angularjs.org/api/ng.$rootScope.Scope#$watch

Example HTML:

<select jq-slider="myList" ng-options="item.val for item in myList"></select>

Example JS:

myApp.directive('jqSlider', function() {
  return {
    link: function(scope, elm, attrs) {
      scope.$watch(attrs.jqSlider, function whenMyListChanges(newValue, oldValue) {
        $(elm).applySelectUISliderUpdateForNewValues();
      });
    }
  };
});