title: Data-binding ng-model with object but display a value in field
body: <p>I am new to AngularJS and I am trying to wrap my head around a certain concept. I have figured out how to successfully perform one way data binding but still can't think of the best way of performing a two way bind with a complex object.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;input type="text" placeholder="Project Lead" ng-model="currentproject.projectLeader.name" /&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>$scope.ViewProject = function (project) {
      $http.get('api/projects/' + project.id)
          .success(function (data) {
              $scope.currentproject = data;
          })
          .error(function (error) {
              $scope.status = 'Unable to load selected project data: ' + error.message;
          });
      };
  </code></pre>
  
  <p>To simplify things, <code>projectLeader</code> has <code>projectLeader.id</code> and <code>projectLeader.name</code>.</p>
  
  <p>I am trying to bind the full <code>projectLeader</code> object to the <code>input</code> field but I want the value of the <code>input</code> to display only the project <code>name</code>. Does this make sense? How would I go about retrieving the new <code>projectLeader</code> when the field changes? Is it best to do an <code>ng-change</code> on that field that calls another request to the server with the name inputted to retrieve the <code>id</code> for that person? Then modify the scope?</p>