Trying to activate a $watch function after a delay in Angular:
Controller Information
.controller('MyCtrl', ['$scope', function ($scope) {
$scope.chickens = ["Jim", "Joe", "Fred"];
$scope.chickens.push("Steve");
setTimeout(function () {
$scope.chickens.push("Larry");
$scope.$apply();
}, 500);
}])
The $watch function is connected in the link function of my directive:
Directive Link Details
link: function (scope, element, attrs) {
scope.$watch('chickens', function (newChickens, oldChickens) {
$(element).html('');
newChickens.forEach(function (chicken) {
$(element).append($('<li/>', {
'text': chicken
}));
});
});
}
The $watch only triggers once with the original four elements, not picking up changes after adding the fifth. Tried using $scope.$apply() but no luck.
Check out the Fiddle for an example. Any assistance would be greatly appreciated. Thank you!