Unable to show Toast message using Ionicframework

Question

I am extremely new to the world of mobile development and I am working with ionic framework.

All I am trying to do is to display a toast message to the user by following this tutorial and so far I am just going crazy trying to implement it.

The error I get is as following

Cannot read property 'toast' of undefined

1. I have installed cordova
2. I have installed the Toast plugin

inside my index.html I have added the script of ng-cordova.min.js

  <script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
  <!-- cordova script (this will be a 404 during development) -->
  <script src="cordova.js"></script>

Do i need to add the Toast.js file in index.html too? If yes then that does not help either and leads to another error.

This is my controller

  .controller('UsersController', ['$scope', '$http', '$cordovaToast', function ($scope, $http, $cordovaToast) {

    $scope.showToast = function() {
      $cordovaToast
        .show("Here's a message", 'short', 'center')
        .then(function(success) {
          console.log('Success');
        }, function (error) {
          console.log('Error');
        });
    };
  }
  ]);

What am i missing here?

I will really appreciate any help.

UPDATE

After making changes, suggested by @Del, the following error appears

ionic.bundle.js:25642 Error: [$injector:unpr] Unknown provider: $cordovaToastProvider <- $cordovaToast <- UsersController
http://errors.angularjs.org/1.4.3/$injector/unpr?p0=%24cordovaToastProvider%20%3C-%20%24cordovaToast%20%3C-%20UsersController
    at ionic.bundle.js:13380
    at ionic.bundle.js:17574
    at Object.getService [as get] (ionic.bundle.js:17721)
    at ionic.bundle.js:17579
    at getService (ionic.bundle.js:17721)
    at invoke (ionic.bundle.js:17753)
    at Object.instantiate (ionic.bundle.js:17770)
    at ionic.bundle.js:22326
    at self.appendViewElement (ionic.bundle.js:56883)
    at Object.switcher.render (ionic.bundle.js:54995)

Answer 1

If the plugin is correctly installed, I have used it without using $cordovaToast

.controller('UsersController', ['$scope', '$http', function ($scope, $http) {

    $scope.showToast = function() {
      window.plugins.toast
        .show("Here's a message", 'short', 'center')
        .then(function(success) {
          console.log('Success');
        }, function (error) {
          console.log('Error');
        });
    };
  }
  ]);

You dont have to add the ng-cordova or toast.js.

If you add the plugin (ionic plugin add ...), remove the platform, add again, and build, it should work