title: Insert dynamically a JSON items using Angular JS and Ionic
body: <p>I have been struggling on how to insert JSON items into a dynamic list :</p>
  
  <p>I have a json file which look like :</p>
  
  <pre><code>[
  {
  "id":"34",
  "City":"New York",
  "Country":"USA"
  },
  {
  "id":"22",
  "City":"Las vegas",
  "Country":"USA"
  },
  {
  "id":"44",
  "City":"Paris",
  "Country":"France"
  },
  {
  "id":"45",
  "City":"Lyon",
  "Country":"France"
  }
  ]
  </code></pre>
  
  <p>I want to show it like that :</p>
  
  <p><img src="https://i.stack.imgur.com/NeUup.png" alt="Screenshot"></p>
  
  <p>Here is my code : </p>
  
  <pre><code>&lt;div ng-controller="customersCtrl"&gt; 
  &lt;div class="list"&gt;
  &lt;div ng-repeat="c in cities"&gt;
  &lt;div class="item item-divider" &gt;
  {{ c.Country }}
  &lt;/div&gt;
   &lt;a class="item" href="#" ng-repeat="ci in cities" ng-if="c.Country == ci.Country"&gt; {{ ci.City }} &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>
  </p>
  
  <pre><code>var app = angular.module('starter', []);
  app.controller('customersCtrl', function($scope, $http) {
  $http.get('data.json')
         .then(function(result){
            $scope.cities = result.data;                
          });
  
  });
  </code></pre>
  
  <p>it's showing like that :</p>
  
  <p><img src="https://i.stack.imgur.com/FrNyF.png" alt="enter image description here"></p>