AngularJS show list of districts with cities in each of them via ng-repeat

<!DOCTYPE html>
<html ng-app="demo">

<head>
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
    <script src="script.js"></script>

</head>

<body ng-controller="MainController">
  <div ng-init="friends = [{name:'John', phone:'555-1276', d="2.5"},
                         {name:'Mary', phone:'800-BIG-MARY', d="5.2" },
                         {name:'Mike', phone:'555-4321', d="7"},
                         {name:'Adam', phone:'555-5678', d="12"},
                         {name:'Julie', phone:'555-8765', d="15"},
                         {name:'Juliette', phone:'555-5678',d="18"}]"></div>

   

    <div class="container">
         <ul class="cf" id="filter">
          <li ng-click="getRadius(5)" class="current"><a href="#">5 km</a></li>
          <li ng-click="getRadius(10)"><a href="#">10 km</a></li>
          <li ng-click="getRadius(25)"><a href="#">25 km</a></li>
          <li ng-click="getRadius(50)"><a href="#">50 km</a></li>
          <li ng-click="getRadius(100)"><a href="#">100 km</a></li>
        </ul>

        <li ng-repeat="frien in friends | orderBy:'-d':true" ng-click="storeListClick(store)">
          <h3>{{ store.store_name }} <small>{{store.d}}km</small></h3>
          <p>{{ store.address1 }}, {{ store.address2 }}
          <br> {{ store.city }}</p>
        </li>
          
          
        </div>

    </div>


</body>

</html>

// Code goes here


controllers.MainController = function($scope) {
  $scope.getRadius = function(radius) {
   console.log(radius); // correctly gets radius value
   $scope.distance = radius
}


app.controller(controllers);

/* Styles go here */

.letter {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin-right: 5px;
  margin-bottom: 5px;
  border: solid 1px blue;
  border-radius: 50%;
  text-align: center;
  line-height: 30px;
  font-size: 16px;
  text-transform: uppercase;
  cursor: pointer;
}

.district {
  border: solid 1px red;
  margin: 10px 0;
  padding: 10px;
}