Как создать navbar/left nav/sidenav в angularjs, где каждый nav отображает данные из файлов json

Question

Я пытаюсь создать приложение, похожее на приложение phonecat, но с небольшими изменениями. вместо выпадающего меню, которое сортируется двумя способами - (1) в алфавитном порядке и (2) самое новое, тогда как в моем приложении у меня разные категории / бренды. И я пытаюсь отобразить каждую категорию с помощью данных JSON, чего не происходит.

Предположим, есть 4 бренда Lenovo, Nokia, Samsung и LG. У меня есть файлы телефонов json, которые имеют эти 4 марки, и у каждой марки есть разные модели телефонов в виде файлов json, в которых есть такие детали, как ссылки на продукты, URL-адреса изображений и т. Д. Теперь у меня есть навигационная панель слева с этими 4 брендами. При нажатии каждой марки должны отображаться только телефоны, относящиеся к этой конкретной марке. Использование выпадающего списка хорошо работает, но оно мне нужно в навигационной панели.

Текущий рабочий код:

<p>Segments:
        <select ng-model="searchText.id">
          <option value="">All</option>
          <option value="leNovo">Lenovo</option>
          <option value="noKia">Nokia</option>
          <option value="samSung">Samsung</option>
          <option value="lG">LG</option>
        </select> 
</p>

<!-- Body -->
<div class="col-md-10">
      <!--Body content-->

      <ul class="phones">
        <li ng-repeat="phone in $ctrl.phones | filter:searchText | orderBy:$ctrl.orderProp"
            class="thumbnail phone-list-item">
          <a href="#!/phones/{{phone.id}}" class="thumb">
            <img ng-src="{{phone.imageUrl}}" alt="{{phone.name}}" />
          </a>
          <a href="#!/phones/{{phone.id}}">{{phone.name}}</a>
          <p>{{phone.snippet}}</p>
        </li>
      </ul>

    </div>