Mahmut Kilic Mahmut Kilic - 3 months ago 37
AngularJS Question

AngularJS Data Driven dropdown with ng-repeat

I have been trying to create data driven cascading dropdown menu with Angularjs for my chart.
Here is what I got so far PLUNKER

<select id="YearSelector">
<option ng-repeat="year in filterOptions.stores">{{year.year}}</option>
<select id="QuarterSelector">
<option ng-repeat="quarter in filterOptions.stores">{{quarter.quarter}}</option>
<select id="channel">
<option ng-repeat="channel in filterOptions.stores">{{}}</option>

I understand in my select ng-repeat loop thru data and display each one of data to my selection menu. But I only want to one time for each data.

OUTPUT of dropdown menu should only have:

  • Year dropdown only: 2011, 2012

  • Quarter dropdown only : 1 , 2

  • Channel: Hypermarkets, Supermarkets


Add angular.filter in your module as:


and use it in your html page as follows:

    <option ng-repeat="(key,value) in filterOptions.stores | groupBy: 'year'">

I've done the year selector in this jsbin example, hope it helps.

Dependency include:

<script src="//"></script>