title: Tracking current selected item with AngularJS
body: <p>I'm new to AngularJS and can't find any suitable answer for this.  My app currently consists of a list of items displayed via Angular.  There is also a label which displays the name of the currently selected item, and an input box which allows the name of the currently selected item to be modified.</p>
  
  <p>What I cannot figure out is how to simultaneously:</p>
  
  <ol>
  <li>Allow the selection of an item, which triggers the update of the label and the input box text to display the name of the newly selected item</li>
  <li>Allow editing of the name in the input box which triggers the update of the label displaying the currently displayed item name</li>
  <li>Edits to the name should be reflected in the original model item</li>
  </ol>
  
  <p>At the moment, i'm trying to keep track of which item is current via a flag against the item and this isn't doing what I want.  Ideally I would replace <code>currentItem</code> in the below with a direct reference to the item in <code>items</code> with <code>isCurrent=true</code>.</p>
  
  <p>Current item name label:</p>
  
  <pre><code>`&lt;div id="CurrentItem" data-ng-model="currentItem"&gt;{{currentItem.name}}&lt;/div&gt;`
  </code></pre>
  
  <p>Current item name input box:</p>
  
  <pre><code>`&lt;input id="ItemName" type="text" data-ng-model="currentItem" value="{{currentItem.name}}" /&gt;`
  </code></pre>
  
  <p>Display all items:</p>
  
  <pre><code>&lt;div data-ng-repeat="item in items" data-ng-click="changeItem(item)"&gt;`
      &lt;img src="images/ItemIcon.png"&gt;
  &lt;div&gt;{{item.name}}&lt;/div&gt;
  </code></pre>
  
  <p>Controller:</p>
  
  <pre><code>var CoreAppController = function($scope, $location) {
     $scope.changeItem = function(item) {
          var length = $scope.items.length;
          while(length-- ) {
              $scope.items[length].isCurrent = false;
          }
          $scope.currentItem = item;
          $scope.items.indexOf(item).isCurrent = false;
      }
  
      $scope.createItem = function(name, layout) {
          $scope.items.push({ id: $scope.items.length + 1,
                              name: name,
                              isCurrent: false
          });
      }
  
      // Initialisation
      $scope.items = [];
      $scope.createItem("Item 1");
      $scope.createItem("Item 2");
  
      $scope.items[0].isCurrent = true;
      $scope.currentItem = $scope.items[0];
  
  }
  </code></pre>
  
  <p>Any advice appreciated!</p>