title: Why my angular controller don´t find my form - $scope.form undefined
body: <p>I am trying do understand why my form is not recognize inside the maincontroller, if I put another controller outside, my form is recognize.</p>
  
  <p><strong><em>config.js</em></strong></p>
  
  <pre><code>var myApp = angular.module('Myapp', ['ui.router','oc.lazyLoad','ui.bootstrap','kendo.directives','ngStorage',]);
  
  function config($stateProvider, $urlRouterProvider, $ocLazyLoadProvider) {
      $urlRouterProvider.otherwise("/index/main");
      $stateProvider
          .state('testing', {
              url: "/testing",
              controller: 'MyController',
              templateUrl: "testing.html"
          });
  }
  
  angular
      .module('Myapp')
      .config(config)
      .run(function($rootScope, $state) {
          $rootScope.$state = $state;
      }); 
  </code></pre>
  
  <p><strong><em>MyController.js</em></strong></p>
  
  <pre><code>function MyController($scope) {     
    //do something
    $scope.test = {name: 'das'};
  
      $scope.sendTest = function () {
          console.log($scope.form.$valid);
          console.log($scope.form.testNumber.$valid);
          console.log($scope.form.testName.$valid);
      };
  };
  
  angular
      .module('Myapp')
      .controller('MyController', ["$scope"]);
  </code></pre>
  
  <p><strong><em>testing.html</em></strong></p>
  
  <pre><code>&lt;form name="form" novalidate&gt;
      &lt;p&gt;
          &lt;label&gt;Number: &lt;/label&gt;
          &lt;input type="number" min="0" max="10" ng-model="test.number" name="testNumber" required /&gt;
      &lt;/p&gt;
      &lt;p&gt;
          &lt;label&gt;Name: &lt;/label&gt;
          &lt;input type="text" ng-model="test.name" name="testName" required /&gt;
      &lt;/p&gt;
      &lt;button ng-click="sendTest()"&gt;Submit&lt;/button&gt;
  &lt;/form&gt; 
  </code></pre>
  
  <p>Like this a have this error </p>
  
  <blockquote>
    <p>TypeError: Cannot read property '$valid' of undefined</p>
  </blockquote>
  
  <p>but if I create another controller inside <em>MyController.js</em> and i move the code inside like this</p>
  
  <pre><code>function ChildController($scope,$timeout) {
      $scope.test = {
          name: 'das'
      };
  
      $scope.sendTest = function () {
          console.log($scope.form.$valid);
          console.log($scope.form.testNumber.$valid);
          console.log($scope.form.testName.$valid);
      };
  };
  
  function MyController($scope) {  //do other stuff ...};
  
  
  angular
      .module('Myapp')
      .controller('ChildController', ["$scope", ChildController])
      .controller('MyController', ["$scope"]);
  </code></pre>
  
  <p>and add the ng-controller to the form like this</p>
  
  <pre><code>&lt;form name="form" novalidate ng-controller='ChildController'&gt;
  </code></pre>
  
  <p>the form is reconize correctly and working.</p>
  
  <p>Can anyone explain what I am missing here, i would like to understand better, I am a novice.</p>
  
  <p>Thanks you for the help.</p>
  
  <p>Best regards.
  Jolynice</p>