AngularJS Controller Data Binding {{$ctrl.test}} Not Working

I’m teaching myself AngularJS by trying to make a simple app. I’m having some trouble with data binding when using a controller.


'use strict';

angular.module('todoItem', ['ngRoute'])

.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/todoItem', {
    templateUrl: 'todo-item/todo-item.template.html',
    controller: 'TodoItemCtrl'

.controller('TodoItemCtrl', [function() {
  this.test = [1, 2, 3, 4];


<p>This is the partial for todo item.</p>
  this is just a test

  <li ng-repeat="i in $ctrl.test">{{i}}</li>

What I am seeing is the web-page display:

This is the partial for todo item.

this is just a test

So this indicates the template is rendering, however without the data binding dependent part…

If I put a console.log(this.test) in the controller code just after the line this.test = [1, 2, 3, 4], it does print the array object to the console Array(4) [ 1, 2, 3, 4 ]. So I know the controller code must be running…

What am I missing?

Also being new to AngularJS, I’m not familiar with debugging in this framework yet. How would you normally debug something like this? Can I goto the console and do something like >>$ctrl?

In case it helps here is app.js

'use strict';

// Declare app level module which depends on views, and core components
angular.module('todoApp', [
config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) {

  $routeProvider.otherwise({redirectTo: '/todoList'});

and index.html:

<!DOCTYPE html>

<html lang="en" ng-app="todoApp">
  <meta charset="utf-8">
  <title>ToDo AngularJS App</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="app.css">

  <div ng-view></div>

  <script src="lib/angular/angular.js"></script>
  <script src="lib/angular-route/angular-route.js"></script>
  <script src="app.js"></script>
  <script src="todo-list/todo-list.js"></script>
  <script src="todo-item/todo-item.js"></script>

Source: AngularJS