title: im getting error. angular.js:13550 TypeError: Cannot read property '$invalid' of undefined
body: <p>I'm trying to copy this code: <a href="http://blog.mgechev.com/2014/02/08/remote-desktop-vnc-client-with-angularjs-and-yeoman/" rel="nofollow">http://blog.mgechev.com/2014/02/08/remote-desktop-vnc-client-with-angularjs-and-yeoman/</a> but am getting an error (see the error down below).</p>
  
  <p>Can anyone help me?</p>
  
  <p>Here is my js code:</p>
  
  <pre><code>'use strict';
  
  angular.module('clientApp')
    .controller('MainCtrl',
    function ($scope, $location, VNCClient) {
  
      $scope.host = {};
      $scope.host.proxyUrl = $location.protocol() + '://' + $location.host() + ':' + $location.port();
  
      $scope.login = function () {
        var form = $scope['vnc-form'];
        if (form.$invalid) {
          form.$setDirty();
        } else {
          VNCClient.connect($scope.host)
          .then(function () {
            $location.path('/vnc')
          }, function () {
            $scope.errorMessage = 'Connection timeout. Please, try again.';
          });
        }
      };
  
    });
  </code></pre>
  
  <p>And my html code:</p>
  
  <pre><code>&lt;div class="container"&gt;
  
    &lt;div class="row" style="margin-top:20px"&gt;
        &lt;div class="col-xs-12 col-sm-8 col-md-6 col-sm-offset-2 col-md-offset-3" ng-controller="MainCtrl"&gt;
        &lt;form role="form" name="vnc-form" novalidate class="css-form"&gt;
          &lt;fieldset&gt;
            &lt;h2&gt;VNC Login&lt;/h2&gt;
            &lt;hr class="colorgraph"&gt;
            &lt;div class="form-error" ng-bind="errorMessage"&gt;&lt;/div&gt;
            &lt;div class="form-group"&gt;
                &lt;input type="text" name="hostname" id="hostname-input" class="form-control input-lg" placeholder="Hostname" ng-model="host.hostname" required ng-minlength="3"&gt;
            &lt;/div&gt;
            &lt;div class="form-group"&gt;
                &lt;input type="number" min="1" max="65535" name="port" id="port-input" class="form-control input-lg" placeholder="Port" ng-model="host.port" required&gt;
            &lt;/div&gt;
            &lt;div class="form-group"&gt;
                &lt;input type="password" name="password" id="password-input" class="form-control input-lg" placeholder="Password" ng-model="host.password"&gt;
            &lt;/div&gt;
            &lt;div class="form-group"&gt;
                &lt;a href="" class="btn btn-lg btn-primary btn-block" ng-click="login()"&gt;Login&lt;/a&gt;
            &lt;/div&gt;
            &lt;hr class="colorgraph"&gt;
          &lt;/fieldset&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>And I get this error: </p>
  
  <pre><code>angular.js:13550 TypeError: Cannot read property '$invalid' of undefined
      at Scope.$scope.login (main.js:12)
      at fn (eval at &lt;anonymous&gt; (angular.js:14432), &lt;anonymous&gt;:4:206)
      at expensiveCheckFn (angular.js:15485)
      at callback (angular.js:25018)
      at Scope.$eval (angular.js:17229)
      at Scope.$apply (angular.js:17329)
      at HTMLAnchorElement.&lt;anonymous&gt; (angular.js:25023)
      at HTMLAnchorElement.jQuery.event.dispatch (jquery.js:4737)
      at HTMLAnchorElement.elemData.handle (jquery.js:4549)
  </code></pre>