Can't get simple AngularJS app to work

Question

I basically copied this code from a video tutorial from the official site. I wish '4' were shown on the screen, but it keeps showing '{{ totalTodos }}'. Here index.js:

function TodoCtrl($scope) {
    $scope.totalTodos = 4;
}

And here index.html:

<html ng-app>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
        <script type="text/javascript" src="index.js"></script>
    </head>
    <body>
    <div ng-controller="TodoCtrl">
        {{ totalTodos }}
    </div>
    </body>
</html>

Possible duplicate of [this post](https://stackoverflow.com/a/28728380/2435473) — Pankaj Parkar, Aug 06 '17 at 18:41

score 1 · Accepted Answer · answered Aug 06 '17 at 18:33

It's good practice to start correctly if you are newbie in angularJs. Start by creating module and give it any name. I used app as a module name and then your controller and so on ..

angular.module("app", []).controller("TodoCtrl", function ($scope) {
    $scope.totalTodos = 4;
});

<html ng-app="app">
        <head>
            <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
            <script type="text/javascript" src="index.js"></script>
        </head>
        <body>
        <div ng-controller="TodoCtrl">
            {{ totalTodos }}
        </div>
        </body>
</html>

Can't get simple AngularJS app to work

1 Answers1