title: How to bind the data to the list using angular JS?
body: <p>This is my HTML code
  It shows one text box and two buttons 'go' and 'clear completed' when i enter text in texbox and after clicking on 'go' button it should added into 
      the unordered list.but problem is that shown in image[![enter image description here][1]][1] i am entering text as 'hhh' and something other unexpected text is coming in unordered list</p>
  
  <pre><code>&lt;html lang="en-US" ng-app="ToDo"&gt;
          &lt;style&gt;
              .done{ text-decoration: line-through;color: #ccc;}
          &lt;/style&gt;
          &lt;body&gt;
              &lt;div ng-controller="todoController"&gt;
                  &lt;form name="frm" ng-submit="addTodo()"&gt;
                      &lt;input type="text" name="newtodo" ng-model="newTodo" required&gt;
                      &lt;button ng-disabled="frm.$invalid"&gt;Go&lt;/button&gt;
                  &lt;/form&gt;
                  &lt;button ng-click="clearcompleted()"&gt;Clear Completed&lt;/button&gt;
                  &lt;ul&gt;
                      &lt;li ng-repeat="todo in todos track by $index"&gt;
                          &lt;input type="checkbox" ng-model="todo.done"/&gt;{{$index + 1}}
                          &lt;span ng-class="{'done':todo.done}"&gt;{{todo.title}}&lt;/span&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
              &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"&gt;&lt;/script&gt;
              &lt;script src="//cdnjs.cloudflare.com/ajax/libs/annyang/2.0.0/annyang.min.js"&gt;&lt;/script&gt;
              &lt;script&gt;
                                      var app = angular.module('ToDo', []);
                                      app.controller('todoController', function($scope){
                                      $scope.todos = JSON.parse(localStorage.getItem('todos')) || []
  
                                              $scope.addTodo = function(){
                                              $scope.todos.push({'title':$scope.newTodo, 'done':false})
                                                      $scope.newTodo = ''
                                              }
                                      $scope.clearcompleted = function(){
                                      $scope.todos = $scope.todos.filter(function(item)){
                                      return !item.done;
                                      }
                                      }
                                      $scope.$watch('todos', function(newValue, oldValue)){
                                      if (newValue != oldValue){
                                      localStorage.setItem('todos', JSON.stringify(newValue))
                                      }
                                      }, true)
                                      })
              &lt;/script&gt;
          &lt;/body&gt;
      &lt;/html&gt;
  
  
        [1]: http://i.stack.imgur.com/TRzbZ.png
  </code></pre>