Angular Ng Repeat Answer

http://stackoverflow.com/questions/37009241/ng-repeat-based-on-select-option

by Renan Ferreira

HTML

<div data-ng-app="app">

  <div data-ng-controller="MainController as mainVm">
    <select data-ng-model="mainVm.selectedScreenIndex" data-ng-change="mainVm.select()">
      <option 
      value="{{screen.id}}" 
      ng-repeat="screen in mainVm.screens">
       {{screen.name}}
      </option>
  </select>
  <ul>
    <li data-ng-repeat="sectionItems in mainVm.selectedItem.sections">{{sectionItems}}</li>
  </ul>
  </div>
  
</div>

JavaScript

angular.module('app', []);

angular.module('app')
	.controller('MainController', mainController);
  
mainController.$inject = ['$scope'];

function mainController($scope){

	var vm = this;
  vm.select = select;
  vm.selectedScreen = null;
  vm.selectedScreenIndex = null;
  vm.screens =  [{
    id: 0,
    name: 'Screen0',
    sections: [{
      id: 0,
      sectionItems: []
    }, {
      id: 1,
      sectionItems: []
    }, {
      id: 2,
      sectionItems: []
    }]
  }, {
    id: 1,
    name: 'Screen1',
    sections: [{
      id: 0,
      sectionItems: []
    }, {
      id: 1,
      sectionItems: []
    }, {
      id: 2,
      sectionItems: []
    }]
  }, {
    id: 2,
    name: 'Screen2',
    sections: [{
      id: 0,
      sectionItems: []
    }, {
      id: 1,
      sectionItems: []
    }, {
      id: 2,
      sectionItems: []
    }]
  }];
  
  function select(){
  	vm.screens.forEach(function(item){
    	if(item.id == vm.selectedScreenIndex){
      	vm.selectedItem = item;
      }
    });
  }

}