AngularJS: Alerts don't show up when multiple messages change ngModel for message

Question

• I have a notification service which works well for when page is loaded and Controller is loaded

• But when I have different buttons calling different functions, they change message, but alerts don't show up

Here is a plunker for that - http://plnkr.co/edit/YioiJXNkaET6T2mexjCq?p=preview

What is that I need to do to update it whenever $scope.message changes?

Answer 1

You could $watch the model and show the alert when it changes. http://plnkr.co/edit/fJuP9LWH4MNVV1cQs3ED?p=preview

In linker function of your directive:

link: function(scope, element, attrs) {
  scope.$watch('ngModel', function() {
    element.show();
    $timeout(function(){
      //element.empty();
      element.hide();
    }, 5000);
  });
}