title: mdDialog does not close and does not update posts Angular Material
body: <p>I have moved a form into an mdDialog pop up to get user input to add a post to the page.</p>
  
  <p>I followed an example on Angular Material. So far it will not close the dialog after the form has been filled out and in turn does  not update my list of posts on the page:</p>
  
  <p>My Controller looks like this:</p>
  
  <pre><code>myApp.controller('PostsController', ['$scope', 'PostsService', '$mdDialog',
      function ($scope, PostsService, $mdDialog) {
          $scope.posts = PostsService.getPosts()
          $scope.incrementUpvotes = function (post) {
              post.upvotes += 1;
          };
          $scope.showAdd = function (ev) {
              $mdDialog.show({
                  controller: DialogController,
                  scope: $scope,
                  template: '&lt;md-dialog aria-label="Mango (Fruit)"&gt; &lt;md-content class="md-padding"&gt;&lt;h1&gt;Add a Post&lt;/h1&gt; &lt;form name="postForm" novalidate ng-submit="addPost()"&gt; &lt;div layout layout-sm="column"&gt; &lt;md-input-container flex&gt; &lt;label&gt;Title&lt;/label&gt; &lt;input type="text" name="title"class="form-control" ng-model="newPost.title" ng-required&gt; &lt;/md-input-container&gt; &lt;/div&gt; &lt;div layout layout-sm="column"&gt; &lt;md-input-container flex&gt; &lt;label&gt;Date&lt;/label&gt; &lt;input type="date" name="date" class="form-control" ng-model="newPost.date"&gt; &lt;/md-input-container&gt; &lt;md-input-container flex&gt; &lt;/div&gt; &lt;div layout layout-sm="column"&gt; &lt;md-input-container flex&gt; &lt;label&gt;Link&lt;/label&gt; &lt;input type="url" class="form-control" ng-model="newPost.link"&gt; &lt;/div&gt; &lt;div layout layout-sm="column"&gt; &lt;md-input-container flex&gt; &lt;label&gt;Username&lt;/label&gt; &lt;input type="text" name="username"class="form-control" ng-model="newPost.username" ng-required&gt; &lt;/div&gt; &lt;/md-input-container&gt; &lt;/form&gt; &lt;/md-content&gt; &lt;div class="md-actions" layout="row"&gt; &lt;span flex&gt;&lt;/span&gt; &lt;md-button type="submit" class="btn btn-primary" ng-click="addPost()" ng-disabled="postForm.$pristine || (postForm.$dirty &amp;&amp; postForm.$invalid) "&gt; Post &lt;/md-button&gt;&lt;/div&gt; &lt;/md-dialog&gt;'
                  ,
                  targetEvent: ev
              });
          };
      }]);
  
  function DialogController($scope, $mdDialog) {
      $scope.addPost = function () {
          $mdDialog.addPost.then(function () {
              var new_id = 1 + $scope.posts[$scope.posts.length - 1].id
              $scope.posts.push({
                  title: $scope.newPost.title,
                  id: new_id,
                  link: $scope.newPost.link,
                  username: $scope.newPost.username,
                  comments: [],
                  upvotes: 0
              });
              $scope.newPost = {};
              $mdDialog.hide();
          });
      };
  };
  </code></pre>
  
  <p>The html to call this in my view is as follows:</p>
  
  <pre><code>&lt;md-button class="md-fab md-fab-bottom-right" aria-label="Add" ng-click="showAdd($event)"&gt;
              &lt;ng-md-icon icon="add"&gt;&lt;/ng-md-icon&gt;
          &lt;/md-button&gt;
  </code></pre>
  
  <p>I have been playing around with this for the past few hours and can't work it out, any insight would be greatly appreciated.</p>