AngularJS Toaster notification doesnt show

Question

I have this small piece of code to open a toaster dialog when a button is clicked. However, when I click on the button, nothing happens. I have removed the http get part of the code for simplification of this problem.

(function () {

app.controller('NewScheduleController', ['$scope', '$http', 'toaster', function ($scope, $http, toaster) {
    $scope.cancelSchedule = function () {
        toaster.success({ title: "Success", body: "Cancelled successfully!" });
    }
} ]);

})();

and the view

<div class="container" ng-controller="NewScheduleController">

<div class="form-horizontal">
<div class="jumbotron">

<button ng-click="cancelSchedule()">Cancel</button>     

    </div>

</div>

<toaster-container toaster-options="{
'closeButton': false,
'debug': false,
'position-class': 'toast-top-right',
'onclick': null,
'showDuration': '200',
'hideDuration': '1000',
'timeOut': '5000',
'extendedTimeOut': '1000',
'showEasing': 'swing',
'hideEasing': 'linear',
'showMethod': 'fadeIn',
'hideMethod': 'fadeOut'
}"></toaster-container>

Please suggest if I am doing anything wrong? Also being an angularjs newbie, I would like to know how to know what is the underlying error? I use chrome's inspect element to look at console/network tabs but there are no errors.

Answer 1

I think you're not including the angular-animate module in the scripts

<script src="http://code.angularjs.org/1.3.3/angular-animate.min.js"></script>

Look at this plunker example.