title: Display list of items and edit them via AngularJS
body: <p>I try to solve a classic problem using AngularJS: I need to display list of some entities and provide ability to add, edit and view details of this entities. </p>
  
  <p>I implement two controllers: ListController to iterate list of entities and ItemController to display and save entity details. This is html code:</p>
  
  <pre><code>&lt;div ng-app="myApp"&gt;
  &lt;a class="btn" data-toggle="modal" data-target="#modal"&gt;Add new item&lt;/a&gt;
  
  &lt;div ng-controller="ListController"&gt;
      &lt;h4&gt;List&lt;/h4&gt;
      &lt;ul&gt;
          &lt;li ng-repeat="item in list"&gt;
              {{item.name}}
              &lt;a class="btn" data-toggle="modal" data-target="#modal" ng-click="editItem(item)"&gt;Edit item&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;div id="modal" role="dialog" class="modal hide fade"&gt;
      &lt;div ng-controller="ItemController"&gt;
          &lt;div class="modal-header"&gt;
              Item Dialog
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;
              &lt;label for="txtName" /&gt;
              &lt;input type="text" id="txtName" ng-model="item.name" /&gt;
          &lt;/div&gt;
          &lt;div class="modal-footer"&gt;
              &lt;button class="btn btn-primary" ng-click="saveItem()" data-dismiss="modal"&gt;OK&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>and controllers code:</p>
  
  <pre><code>var db_list = [{ name: "Test1" }, { name: "Test2" }];
  var app = angular.module('myApp', []).
  controller('ListController', function($scope, $rootScope) {
      $scope.list = db_list;
      $scope.editItem = function(item) {
          $rootScope.item = item;
      }
  }).
  controller('ItemController', function($scope, $rootScope) {
      $scope.saveItem = function() {
          db_list.push($rootScope.item);
          $rootScope.item = null;
      }
  });
  </code></pre>
  
  <p>Also you can find the working ptototype at <strong><a href="http://jsfiddle.net/yoyoseek/9Qntw/16/" rel="nofollow">http://jsfiddle.net/yoyoseek/9Qntw/16/</a></strong>.</p>
  
  <p>The general problem in this code that I store entity to display its description using scope of the ListController (via editItem()), but I need this stored entity details in the ItemController. I use $rootScope for sharing entity to edit and it looks like hack for me. Is it a normal practice?</p>
  
  <p>This code has one more drawback: $rootScope.item have to been cleared on modal dialog hide.</p>