Angularjs Legacy Integration And Content That Contains Asynchronously Changing Id Doesn't Trigger Watcher

I have a legacy page that has a that is populated with Jquery (legacy code) asynchronously after the page loads for the fir

Solution 1:

Angular is unaware of the jquery change (obviously). You can emit the data in a custom event in jQuery, capture that event in angular and rebroadcast it to your directive to get it the first time.

Here is a plunkr with it working: http://plnkr.co/edit/RTIzEudC7TktDTSdqWnQ It will update the binding on the page after jquery emits an event 5 seconds after page load

//emit in jquery
$(document).trigger('customEvent', data);

app.run(['$rootScope', function ($rootScope) {
    //capture jQuery events and re-broadcast them as angular events//events to capturevar events = [
                    'customEvent'
                ];

                //To Use: $scope.$on('eventName', function(ngEvent, jqEvent, data)
                $(document).on(events.join(' '), function(e) {
                    $rootScope.$broadcast.apply($rootScope, [e.type].concat(Array.prototype.slice.call(arguments, 0)));
                });
});

//listen for it in directive
scope.$on('customEvent', function(){
    scope.$apply(function(){
        //do stuff here and angular will be aware of it
    });
});