title: Angular Js submit doesn't seem to be working
body: <p>Angular Js submit doesn't seem to be working
  It loads and it doesn't give me any errors, but the posts are not being added to the "posts" collection.
  I'm using chrome and web server extension for chrome.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>angular.module('littleTweet', ['ui.router'])
  .config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
   $stateProvider
   .state('home', {
    url: '/home',
    templateUrl: 'home.html',
    controller: 'MainController'
   })
   .state('posts', {
     url: '/posts/{id}',
     templateUrl: 'posts.html',
     controller: 'PostsCtrl'
   });
  
   $urlRouterProvider.otherwise('home');
  
  }])
  .factory('posts', [function() {
   var o = { posts: []};
   return o;
  }])
  .controller('MainController', ['$scope', 'posts', function($scope, posts){
    $scope.posts = posts.posts;
    
    $scope.current_user = 'me';
     
     $scope.addPost = function() {
      //if(!$scope.message || $scope.message === '') { return; }
      
      $scope.posts.push({
       user: $scope.current_user,
       message: $scope.message, 
       time: new Date()
      });
  
    $scope.message = '';
   };
  }])
  .controller('PostsCtrl', ['$scope', '$stateParams', 'posts', function($scope, $stateParams, posts) {
   $scope.post = posts.posts[$stateParams.id];
  }]);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Little Tweet&lt;/title&gt;
    &lt;link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"&gt;
    &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"&gt;&lt;/script&gt;
    &lt;script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"&gt;&lt;/script&gt;
    &lt;script src="app.js"&gt;&lt;/script&gt;
    &lt;style&gt; .glyphicon-thumbs-up { cursor:pointer } &lt;/style&gt;
  &lt;/head&gt;
  &lt;body ng-app="littleTweet"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-md-6 col-md-offset-3"&gt;
     
     &lt;ui-view&gt;&lt;/ui-view&gt;
        
        &lt;div class="page-header"&gt;
          &lt;h1&gt;Little Tweet&lt;/h1&gt;
        &lt;/div&gt;
  
        &lt;div ng-repeat="post in posts"&gt;
          &lt;span style="font-size:20px; margin-left:10px;"&gt;
  
            {{post.user}}: {{post.message}} at {{post.time}}
          &lt;/span&gt;
        &lt;/div&gt;
  
        &lt;form ng-submit="addPost()"
          style="margin-top:30px;"&gt;
          &lt;h3&gt;Add a new post&lt;/h3&gt;
  
          &lt;div class="form-group"&gt;
            &lt;input type="text"
              class="form-control"
              placeholder="Message"
              ng-model="message"&gt;&lt;/input&gt;
          &lt;/div&gt;
          &lt;button type="submit" class="btn btn-primary"&gt;Post&lt;/button&gt;
        &lt;/form&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
   &lt;script type="text/ng-template" id="home.html"&gt;
     &lt;div class="page-header"&gt;
       &lt;h1&gt;Little tweet&lt;/h1&gt;
     &lt;/div&gt;
  
     &lt;!-- rest of template --&gt;
   &lt;/script&gt;  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>