title: Pass specific data from one controller to another
body: <p>I have a list. What I want is when I click on one of the item of List a new page should open where the data related to only that listItem is displayed. Right now I am using anchor tag and .config to pass data like this: </p>
  
  <pre><code>&lt;ion-item ng-repeat="field in fields"&gt;
      &lt;a href="#detail/{{field.firstName}}/{{field.personNo}}/{{field.street}}/{{field.city}}/{{field.postcode}}" id="a-item"&gt; &lt;div style="width:100%;height:100%" &gt;    
           {{field.firstName}}&lt;br&gt;
           {{field.personNo}} &lt;/div&gt;&lt;/a&gt; 
   &lt;/ion-item&gt;
  </code></pre>
  
  <p>And </p>
  
  <pre><code>.config(['$routeProvider',
  function($routeProvider) {
  $routeProvider.
    when('/', {
      templateUrl: 'templates/mainpage.html'
  
    }).
    when('/detail/:name/:no/:street/:city/:postcode', {
      templateUrl: 'templates/details.html',
      controller: 'detailctrl'
  })
  }])
  </code></pre>
  
  <p>I don't think this is an effective way to pass data. Although I know about .service but I can't figure out a way to pass data specific to the item clicked.  Please suggest a better way. Thanks</p>