Angular: $interval undefined

Question

I am getting error while trying to use $interval.

Error: Uncaught ReferenceError: $interval is not defined

Sample code in Plnkr: plnkr

Can someone please help me out. Thanks!

var MyApp = angular.module('MyApp', []);

(function() {
  var MainController = function($scope, $http, $interval) {

    var OnSuccess = function(response) {
      $scope.user = response.data;
      $http.get($scope.user.repos_url).then(OnLoadRepos, OnError)
    };

    var OnLoadRepos = function(response) {
      $scope.repos = response.data;
    };
    var OnError = function(response) {
      $scope.user = "";
      $scope.error = "could not fetch the data.";
    };

    $scope.search = function(username) {
      $http.get("https://api.github.com/users/" + username).then(OnSuccess, OnError);
    };
    $scope.message = "GitHub Viewer!";
    $scope.username = "angular";
    $scope.countdown = 5;
    $scope.repoSortOrder = "-stargazers_count";
  };
  var decrementCountDown = function() {
    $scope.countdown -= 1;
    if ($scope.countdown < -1) {
      $scope.search($scope.username);
    }
  };
  MyApp.controller('MainController', MainController);

  var startCountdown = function() {
    $interval(decrementCountDown, 1000,$scope.countdown);
  };
  startCountdown();
}());

Answer 1

Mistake :

Here your startCountdown function is outside of angular's controller so it is simple javascript function.

In Javascript function you are using $interval dependency so it will not work.

Solution:

One more thing you have injected $interval in controller so by transferring your startCountdown functuion into the angular function in the controller will work.

var MyApp = angular.module('MyApp', []);

(function() {
  var MainController = function($scope, $http, $interval) {

    var OnSuccess = function(response) {
      $scope.user = response.data;
      $http.get($scope.user.repos_url).then(OnLoadRepos, OnError)
    };

    var OnLoadRepos = function(response) {
      $scope.repos = response.data;
    };
    var OnError = function(response) {
      $scope.user = "";
      $scope.error = "could not fetch the data.";
    };

    $scope.search = function(username) {
      $http.get("https://api.github.com/users/" + username).then(OnSuccess, OnError);
    };
    $scope.message = "GitHub Viewer!";
    $scope.username = "angular";
    $scope.countdown = 5;
    $scope.repoSortOrder = "-stargazers_count";
  };
  var decrementCountDown = function() {
    $scope.countdown -= 1;
    if ($scope.countdown < -1) {
      $scope.search($scope.username);
    }

    $scope.startCountdown = function() {
        $interval(decrementCountDown, 1000,$scope.countdown);
     };
     $scope.startCountdown();
  };
  MyApp.controller('MainController', MainController);

}());