Angular $scope value won't show up on a page

Question

I am starting to learn Angular and tried to repeat the "To do list" task they have on the homepage. However, I am stuck in the very beginning:

http://codepen.io/Deka87/pen/grGWqQ

Template

<div ng-app>

  <div ng-controller="TodoCtrl">

    <h2>{{totalItems}}</h2>

  </div>

</div>

Javascript

function TodoCtrl($scope) {

  $scope.totalItems = 4;

}

I seem to do the very same thing, however it doesn't work. What's wrong?

Answer 1

First you must import the angular library, then instantiate your app and finally create your controller, this way:

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

<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
</head>

<body ng-controller="TodoCtrl">
  <div>
    <h2>{{totalItems}}</h2>
  </div>
</body>

</html>

I recommend you to check this: What is a Module?

Angular $scope value won't show up on a page

Sign up