title: Angular form validation ng-disabled not working
body: <p>I am trying to use the angular form validations in my form for a blog post, and more specifically a ng-disabled form. For reasons I cannot figure out the submit button is not disabled, where as it should be unless all three input fields are valid. Thanks for the help.  </p>
  
  <p>this is my blog template</p>
  
  <pre><code> &lt;div ng-controller='BlgoCtrl'&gt;
    &lt;div class='container'&gt;
      &lt;h1&gt; Teewinot Blgo&lt;/h1&gt;
      &lt;div class="row"&gt;
        &lt;div class='col-md-12'&gt;
          &lt;form role='form' name='blgoPost' novalidate&gt;
            &lt;div class='form-group'&gt;
            &lt;label for='blgoTitle'&gt;Title&lt;/label&gt;
            &lt;input name='title' type="title" class='form-control'  placeholder='Technologies of the Future' required&gt;&lt;br&gt;
            &lt;label for='blgoContent'&gt;Content&lt;/label&gt;
            &lt;textarea name='content' rows='8' type="content" class='form-control' placeholder='The technical innovations of the future will be diverse and impactful on the individual......' required&gt;&lt;/textarea&gt;&lt;br&gt;
            &lt;label for='blgoPassCode'&gt;PassCode&lt;/label&gt;
            &lt;input name='passcode' type="passcode" class='form-control' placeholder='&amp;#8226;&amp;#8226;&amp;#8226;&amp;#8226;&amp;#8226;&amp;#8226;&amp;#8226;&amp;#8226;&amp;#8226;&amp;#8226;&amp;#8226;&amp;#8226;&amp;#8226;&amp;#8226;&amp;#8226;' required&gt;&lt;br&gt;
            &lt;button type="submit" class='btn btn-primary' ng-disabled="blgoPost.$invalid"&gt;Submit Post&lt;/button&gt;
            &lt;/div&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>Here is my index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Teewinot&lt;/title&gt;
  
    &lt;script src="bower_components/angular/angular.js"&gt;&lt;/script&gt;
  
    &lt;script src="bower_components/jquery/dist/jquery.js"&gt;&lt;/script&gt;
    &lt;script src="bower_components/bootstrap/dist/js/bootstrap.js"&gt;&lt;/script&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;script src="bower_components/angular-route/angular-route.js"&gt;&lt;/script&gt;
    &lt;link href="bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet"&gt;
  
  &lt;/head&gt;
  
  &lt;body ng-app="Teewinot"&gt;
  &lt;ng-include src="'app/templates/partials/navbar.html'"&gt;&lt;/ng-include&gt;
  
  &lt;ng-view&gt;&lt;/ng-view&gt; 
  &lt;!-- angular module defintion and reoutes --&gt;
  &lt;script src="app/js/app.js"&gt;&lt;/script&gt;
  &lt;script src="app/js/routes.js"&gt;&lt;/script&gt;
  &lt;!-- controllers --&gt;
  &lt;script src="app/js/controllers/blog.controller.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This is my blog controller</p>
  
  <pre><code>angular.module('Teewinot').controller('BlgoCtrl', function($scope, $http) {
    'use strict'
  });
  </code></pre>