Chapter 5 of the Tutorial at


I’m very new to Ionic and tried to get the sample todo app up and running.

All works well until Chapter 5, where suddenly it stops working altogether - where am I going wrong?

Here’s what I see after following the instructions, along with the HTML & js files.

Thanks in advance!



// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('todo', ['ionic'])

.controller('TodoController', function($scope) {
  $scope.tasks = [];

  // Create and load the Modal
  $ionicModal.fromTemplateUrl('new-task.html', function(modal) {
    $scope.taskModal = modal;
  }, {
        scope: $scope,

  // Called when the form is submitted
  $scope.createTask = function(task) {
      title: task.title
    task.title = "";

  // Open our new task modal
  $scope.newTask = function() {

  // Close the new task modal
  $scope.closeNewTask = function() {



<!DOCTYPE html>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/" rel="stylesheet">

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
  <body ng-app="todo" ng-controller="TodoController">


        <!-- Center content -->
          <ion-header-bar class="bar-dark">
            <h1 class="title">Todo</h1>
            <!-- New Task button -->
            <button class="button button-icon" ng-click="newTask()">
              <i class="icon ion-compose"></i>

            <!-- our list and list items -->
              <ion-item ng-repeat="task in tasks">


        <!-- Left menu -->
        <ion-side-menu side="left">
          <ion-header-bar class="bar-dark">
            <h1 class="title">Projects</h1>

      <script id="new-task.html" type="text/ng-template">
                <div class="modal">

          <!-- Modal header bar -->
          <ion-header-bar class="bar-secondary">
            <h1 class="title">New Task</h1>
            <button class="button button-clear button-positive" ng-click="closeNewTask()">Cancel</button>
          <!-- Modal content area -->
            <form ng-submit="createTask(task)">
              <div class="list">
                <label class="item item-input">
                  <input type="text" placeholder="What do you need to do?" ng-model="task.title">
              <div class="padding">
                <button type="submit" class="button button-block button-positive">Create Task</button>