AngularJS dynamically populate details from json based on item selected


I am trying to create a page where you have few items in a list group which when selected should show more details.

Please view the example here

How can I populate the details from the json file based on the item that is selected in the list group?

This is what I have so far.


<div ng-controller=ItemsController>
    <div class="row">
      <div class="col-md-4">
        <div class="panel panel-default">
          <ul class="list-group">
            <a class="list-group-item" ng-repeat="item in itemDetails">{{}}</a>

      <div class="col-md-8">
        <div class="panel panel-default">
          <h2>Name: </h2>
          <br />Address Line 1:
          <br />Address Line 2:
          <br />Suburb:
          <br />Phone:
          <br />Email:


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 itemsFactory;


myItemsApp.controller('ItemsController', ['$scope', 'itemsFactory', function($scope, itemsFactory){
  var promise = itemsFactory.itemDetails();

    promise.then(function (data) {
        $scope.itemDetails = data;


      "name":"Test itemName 1",
      "addressLine1":"18 Banksia Street",
      "contactPhone":"+61 3 123456",
      "name":"Test itemName 2",
      "addressLine1":"11 Riverview Place",
      "addressLine2":"Metroplex on Gateway",
      "contactPhone":"1300 73123456",
      "name":"Test itemName 3",
      "addressLine1":"60 Waterloo Road",
      "suburb":"North Ryde",

Any help would be greatly appreciated.

I am very new to programming. Please also feel free to alternative ways of achieving this if I have done it wrong.

Problem courtesy of: aliaz


You can use the ng-click directive to specify what happens when you click something.

So I made it assign the clicked item to the $scope.selected object using a function ($ and then I bound the properties of that object to your little details section. That's probably the simplest way to do it.


$ = function(item) {
  $scope.selected = item;
$scope.selected = {};


<a class="list-group-item" ng-click="select(item)" ng-repeat="item in itemDetails">

And the selected object is then available like this:

<h2>Name: {{}}</h2>

See my example here:

Solution courtesy of: Shomz


There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.