I am a newbie to this framework struggling to understand scope .

I followed the basic steps for creating a todo app given in the yeoman website.

**Here is my code :**

**Index.Html**

```
<!doctype html>
<html class="no-js">
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="styles/main.css">
</head>
<body ng-app="mytodoApp">
    <div class="container" ng-include="'views/main.html'" ng-controller="MainCtrl"></div>
    <script>
        (function (i, s, o, g, r, a, m) {
            i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
                (i[r].q = i[r].q || []).push(arguments)
            }, i[r].l = 1 * new Date(); a = s.createElement(o),
            m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
        })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
        ga('create', 'UA-XXXXX-X');
        ga('send', 'pageview');
    </script>
    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/json3/lib/json3.js"></script>
    <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
    <script src="scripts/app.js"></script>
    <script src="scripts/controllers/main.js"></script>
</body>
</html>

```

**Main.Html** 

```
<div class="container">
    <h2>My todos</h2>

    <!-- Todos input -->
    <form role="form" ng-submit="addTodo()">
        <div class="row">
            <div class="input-group">
                <input type="text" ng-model="todo" placeholder="What needs to be done?" class="form-control">
                <span class="input-group-btn">
                    <input type="submit" class="btn btn-primary" value="Add">
                </span>
            </div>
        </div>
    </form>
    <p></p>

    <!-- Todos list -->
    <div ui-sortable ng-model="todos">
        <p class="input-group" ng-repeat="todo in todos" style="padding: 5px 10px; cursor: move;">
            <input type="text" ng-model="todo" class="form-control">
            <span class="input-group-btn">
                <button class="btn btn-danger" ng-click="removeTodo($index)" aria-label="Remove">X</button>
            </span>
        </p>
    </div>
</div>

```

**Main.js**

```
'use strict';
angular.module('mytodoApp')
  .controller('MainCtrl', function ($scope) {
      $scope.todos = ['Item 1', 'Item 2', 'Item 3'];
      $scope.addTodo = function () {
          $scope.todos.push($scope.todo);
          $scope.todo = '';
      };
      $scope.removeTodo = function (index) {
          $scope.todos.splice(index, 1);
      };
  });

```

**App.JS**

```
'use strict';
angular
  .module('mytodoApp', []);

```

**When i click on add button, the $scope.todo is undefined and its adding an item showing empty text box.**

The delete functionality is working absolutely fine.

I guess the problem is with the scoping . Can any one care to guide me with regards to this ?

Updated :

Please find below screen

![enter image description here](https://i.stack.imgur.com/dVj6w.png)
**I am not getting any error rather the output is wrong.**

This is what heppening when trying to add a new item.