title: Angular pass data to a separate page
body: <p>I have a list of items displayed from a service, using ng-repeat. All these items have a "full item details" link (item.html). A generic page that will show more information.</p>
  
  <p>What would be the best way to pass data of the item clicked to item.html so that the information showing comes from the item clicked?</p>
  
  <p><strong>HTML looks like:</strong></p>
  
  <pre><code>&lt;div class="container" ng-app="myApp"&gt;
      &lt;div ng-controller="ItemController"&gt;
          &lt;div ng-repeat="item in data.details"&gt;
              &lt;div class="wrapper"&gt;
                  &lt;h3&gt;{{item.title}}&lt;/h3&gt;
                  &lt;p&gt;{{item.description}}&lt;/p&gt;
                  &lt;a href="#myModal" class="btn" openmodal&gt;Open modal&lt;/a&gt;
                  &lt;a href="item.html"&gt;View full item details&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Angular</strong></p>
  
  <pre><code>var myApp = angular.module('myApp', []);
  
  myApp.factory('Data', function(){
      var Data = {};  
      Data.details = [
          {
              "id": 1,
              "title": "Item 1",
              "description": "Post 1 description - Nullam ac tellus sed mi laoreet placerat.",
              "more": "more info"
          },
          {   
              "id": 2,
              "title": "Item 2",
              "description": "Post 2 description - Cociis natoque penatibus et magnis dis parturient montes.",
              "more": "more info"
  
          },
          {
              "id": 3,
              "title": "Item 3",
              "description": "Post 3 description - Nullam ac tellus sed mi laoreet placerat.",
              "more": "more info"
          }
      ]
      return Data;
  });
  
  // Controller
  function ItemController($scope, Data){
      $scope.data = Data;
  }
  </code></pre>
  
  <p>Thanks in advance</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>I created my routes, HTML page for each route then use ng-view to show the appropriate content.</p>
  
  <p>See my code below:</p>
  
  <pre><code>// Routes
  myApp.config(function($routeProvider){
      $routeProvider
          .when('/', {
                  templateUrl:"home.html"
          })
          .when('/task', {
                  templateUrl:"item.html"
          })
  })
  
  // Controller
  function ItemController($scope, $location, Item){
      $scope.data = Item;
  
      $scope.viewDetail = function(item) {
          $scope.currItem= item;
          $location.path('/item');
      }
  }
  </code></pre>
  
  <p>Now the index.html looks like that:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;ng-view&gt;&lt;/ng-view&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Then I created individual files for my routes:</p>
  
  <p>home.html</p>
  
  <pre><code>&lt;div class="container" ng-app="myApp"&gt;
      &lt;div ng-controller="ItemController"&gt;
          &lt;div ng-repeat="item in item.details"&gt;
              &lt;h3&gt;{{item.title}}&lt;/h3&gt;
              &lt;a ng-click="viewDetail(item)"&gt;View full item details&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>item.html</p>
  
  <pre><code>&lt;div class="container" ng-app="myApp"&gt;
      &lt;div ng-controller="ItemController"&gt;
          &lt;h3&gt;{{currItem.title}}&lt;/h3&gt;
          &lt;p&gt;{{currItem.description}}&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My link (View full item details) in home.html  uses ng-click to pass the "item" object clicked.<br>
  Now I'd like to use this item object within item.html 
  console.log(item) gives me the correct object. </p>
  
  <p>I tried to use "currItem" within item.html to display the correct data. It doesn't work.</p>
  
  <p>Not sure what I'm missing here?</p>