title: nest ng-view inside a form
body: <p>given the controller</p>
  
  <pre><code>function ctl($scope, $http) {
    $scope.postForm = function() {
      console.log("submitting form")
    }
  }
  </code></pre>
  
  <p>and the view</p>
  
  <pre><code>  &lt;form name="pform" ng-show="!error.Show"&gt;
      &lt;div ng-view&gt;&lt;/div&gt;
      &lt;button type='button' value='Save' ng-click="postForm()" /&gt;
    &lt;/form&gt;
  </code></pre>
  
  <p>The controller method <code>postForm</code> doesn't get called, however, if i move the form tag into the view the method is called.  Is there a reason that this doesn't work as I expect it to?  Is there another way to accomplish the goal of sharing the form controls across different views?</p>
  
  <p><strong>Update</strong></p>
  
  <p>my module and routeProvider are configured like this:</p>
  
  <pre><code>angular.module("profilemodule", [])
  .config(['$routeProvider', function ($routeProvider) {
      $routeProvider
          .when("/info", { templateUrl: '/partials/profile/info.html', controller: ProfileController })
          .when("/user", { templateUrl: '/partials/profile/user.html', controller: ProfileController })
          .when("/introduction", { templateUrl: '/partials/profile/editor.html', controller: ProfileController })
          .otherwise({ redirectTo: '/info' });
  }]).run(function ($rootScope, $location) {
      $rootScope.location = $location;
  })
  </code></pre>
  
  <p>and the page includes some nav elements which are set based on the location service like so:</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="offset2 span10"&gt;
          &lt;ul class="nav nav-pills"&gt;
              &lt;li ng-class="{active: location.$$path.substring(0, '/info'.length) == '/info'}"&gt;&lt;a href="#/info" &gt;Information&lt;/a&gt;&lt;/li&gt;
              &lt;li ng-class="{active: location.$$path.substring(0, '/user'.length) == '/user'}"&gt;&lt;a href="#/user" &gt;User&lt;/a&gt;&lt;/li&gt;
              &lt;li ng-class="{active: location.$$path.substring(0, '/intro'.length) == '/intro'}"&gt;&lt;a href="#/intro" &gt;Introduction&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;form name="pform" method="POST" ng-show="!error.Show"&gt;
     &lt;div ng-view&gt;&lt;/div&gt;
     &lt;button type='button' value='Save' ng-click="postForm()" /&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>the <code>ng-class</code> statements works perfectly, is it because I've set the <code>location</code> property of <code>$scope</code> in the module's <code>run</code> method?</p>
  
  <p>thanks,</p>
  
  <p>jason</p>