title: How to use ng-model / bind in different views?
body: <p>I have a view for my <code>app-header</code> and view for body content <code>ng-view</code>. Basically I have a ng-model input in the profile body and when that is loaded up, I want to bind it to something in the header.</p>
  
  <p>If the ng-model and the binding are in the same view I have no problem, but not sure how to get the binding to go across scopes:</p>
  
  <pre><code>&lt;!-- Main Nav --&gt;
  &lt;app-header&gt;&lt;/app-header&gt;
  
  &lt;div class="content_container"&gt;
      &lt;!-- angular templating content will be injected here --&gt;
      &lt;div ng-view&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Input in profile component</p>
  
  <pre><code>&lt;input ng-model="profile_name" type="text" id="profile_first_name" name="profile_first_name"/&gt;
  </code></pre>
  
  <p>Header</p>
  
  <pre><code>&lt;div class="user_badge"&gt;{{profile_name}}&lt;/div&gt;
  </code></pre>
  
  <p>Header Directive</p>
  
  <pre><code>// Directive for Header
  app.directive('appHeader', function () {
      // Type of Directive, E for element, A for Attribute
      // url of a template
      return {
          restrict: 'E',
          templateUrl: 'shared/navigation/header.html'
      };
  });
  </code></pre>
  
  <p>ProfileController</p>
  
  <pre><code>// Controller for Profile
  app.controller('ProfileController', function() {
  });
  
  // Controller for Complete Registration
  app.controller('CompleteRegistrationController', function() {
  });
  
  // configure our routes
  app.config(['$routeProvider', function($routeProvider) {
      $routeProvider
  
      // route : Edit Profile
      .when('/profile', {
          title : 'Edit Profile',
          templateUrl : 'components/profile/edit-profile.html',
          controller  : 'ProfileController'
      });
  }]);
  </code></pre>