Showing only 1 toastr
<p>We're using angular-toastr.js in our application. We have the following directive used in all our edit forms:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code> app.directive('serverError', ['resourceFactory','spinnerService', 'toastr', function (resourceFactory,spinnerService,toastr) {
        return {
            restrict: 'A',
            controller: ['$scope', '$timeout', function ($scope, $timeout) {

                var errorToastConfig = {closeButton:true,timeOut:0,tapToDismiss:true};

                $scope.$on('sm:badRequest', function (event, data) {

                    angular.forEach(data, function (value, key) {
                        if (value.message == '') value.message = 'The ' + value.property + ' value is invalid.'
                    });

                    $scope.errors = data;
                    //$scope.alertMessage = resourceFactory.getResource('Messages', 'errorOnForm');
                    //$scope.alertType = 'error';
                    $timeout(function () {
                        spinnerService.stopSpinner();
                    }, 0);
                    toastr.clear();
                    var errorMsg = ($scope.errors[0] &amp;&amp; $scope.errors[0].message?$scope.errors[0].message:resourceFactory.getResource('Messages', 'errorOnForm'));

                    toastr.error(errorMsg, errorToastConfig);
                    $scope.disableAction = false;
                });
   </code></pre>
</div>
</div>
</p>

<p>The problem is that when the page encounters a bad request I see 3 toastr messages on the screen instead of just 1. One is coming from my controller's code and 2 from this directive as this code is executed twice by angular. Adding toastr.clear() doesn't resolve the issue. Ideally, I don't want to run the code at all if the error is handled by the controller's code already. Otherwise I want to make sure I only display one toastr with the error information. Do you see what needs to be changed in the above?</p>

<p>UPDATE. I can also show our main app.js code to handle bad requests. When I am debugging the code I can see that the directive code fires twice and the toastrs array is empty when the call is executed.</p>

<p>This is app's code:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>app.factory('badRequestInterceptor', ['$rootScope', '$q', function ($rootScope, $q) {
        return {
            'responseError': function (rejection) {
                if (rejection.status === 400) {
                    $rootScope.$broadcast("sm:badRequest", rejection.data);
                }
                return $q.reject(rejection);
            }
        };
    }]);

    app.factory('noConnectionInterceptor', ['$rootScope', '$q', function ($rootScope, $q) {
        return {
            
            'responseError': function (rejection) {
                console.dir(rejection);
                if (rejection.status === -1) {
                    $rootScope.$broadcast("sm:noConnection");
                }
                return $q.reject(rejection);
            }
        };
    }]);</code></pre>
</div>
</div>
</p>