Javascript – Angular JS TypeError: f is not a function

angularjsjavascript

I'm trying to figure out as to why my timeout function is giving error, thereby restricting the change in model value.

angularExample.html

<!DOCTYPE html>
<html ng-app="Tutorial">
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script type="text/javascript" src="scripts/app.js"></script>
  </head>
<body ng-controller="MyController">  
     <input type="text" ng-model="data" />
</body>
</html>

app.js

(function() {

  var app = angular.module('Tutorial', []);
app.controller("MyController",function($scope,$timeout){

    $scope.data="hi";
    $timeout(callAtTimeout,3000);

    var callAtTimeout=function(){$scope.data="hello";}
});
})();

Error Snapshot:
enter image description here

Best Solution

You need to define callAtTimeout first then use it.

var callAtTimeout=function(){console.log("hi")}
$timeout(callAtTimeout,3000);

Initializations in Javascript are not hoisted.