title: AngularJS dynamically populate details from json based on item selected
body: <p>I am trying to create a page where you have few items in a list group which when selected should show more details. </p>
  
  <p>Please view the example here <a href="http://plnkr.co/edit/Oava3pA9OTsm80K58GdT?p=preview" rel="nofollow">http://plnkr.co/edit/Oava3pA9OTsm80K58GdT?p=preview</a></p>
  
  <p>How can I populate the details from the json file based on the item that is selected in the list group?</p>
  
  <p>This is what I have so far. </p>
  
  <p><strong>html:</strong></p>
  
  <pre><code>&lt;div ng-controller=ItemsController&gt;
      &lt;h3&gt;Test&lt;/h3&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-md-4"&gt;
          &lt;div class="panel panel-default"&gt;
            &lt;ul class="list-group"&gt;
              &lt;a class="list-group-item" ng-repeat="item in itemDetails"&gt;{{item.name}}&lt;/a&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="col-md-8"&gt;
          &lt;div class="panel panel-default"&gt;
            &lt;h2&gt;Name: &lt;/h2&gt;
            &lt;br /&gt;Address Line 1:
            &lt;br /&gt;Address Line 2:
            &lt;br /&gt;Suburb:
            &lt;br /&gt;Phone:
            &lt;br /&gt;Email:
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p><strong>script:</strong></p>
  
  <pre><code>var myItemsApp = angular.module('myItemsApp', []);
  
  myItemsApp.factory('itemsFactory', ['$http', function($http){
    var itemsFactory ={
      itemDetails: function() {
        return $http(
        {
          url: "mockItems.json",
          method: "GET",
        })
        .then(function (response) {
          return response.data;
          });
        }
      };
      return itemsFactory;
  
  }]);
  
  
  myItemsApp.controller('ItemsController', ['$scope', 'itemsFactory', function($scope, itemsFactory){
    var promise = itemsFactory.itemDetails();
  
      promise.then(function (data) {
          $scope.itemDetails = data;
          console.log(data);
      });
  }]);
  </code></pre>
  
  <p><strong>json:</strong></p>
  
  <pre><code>[
     {
        "$id":"1",
        "name":"Test itemName 1",
        "themeName":"ASD",
        "addressLine1":"18 Banksia Street",
        "addressLine2":null,
        "suburb":"Heidelberg",
        "state":"VIC",
        "postalCode":"3084",
        "contactPhone":"+61 3 123456",
        "emailAddress":"qwerty.it@xyz.com"
     },
     {
        "$id":"2",
        "name":"Test itemName 2",
        "themeName":"WER",
        "addressLine1":"11 Riverview Place",
        "addressLine2":"Metroplex on Gateway",
        "suburb":"Murarrie",
        "state":"QLD",
        "postalCode":"4172",
        "contactPhone":"1300 73123456",
        "emailAddress":"asdfg.it@xyz.com"
     },
     {
        "$id":"3",
        "name":"Test itemName 3",
        "themeName":"ERT",
        "addressLine1":"60 Waterloo Road",
        "addressLine2":null,
        "suburb":"North Ryde",
        "state":"NSW",
        "postalCode":"2113",
        "contactPhone":"123456",
        "emailAddress":"zxcvb.it@xyz.com"
     }
  ]
  </code></pre>
  
  <p>Any help would be greatly appreciated. </p>
  
  <p>I am very new to programming. Please also feel free to alternative ways of achieving this if I have done it wrong. </p>