title: Setting different map marker icons based on value of ng-repeat variable
body: <p>I am trying to add map markers dynamically to the map using ng-repeat inside ng-map as follows,</p>
  
  <pre><code>&lt;div id="map-canvas"&gt;
      &lt;ng-map default-style="true"&gt;
          &lt;marker id='ID{{school.id}}' ng-repeat="school in vm.schools" position="{{school.location}}" on-click="vm.showDetail(school)" icon="assets/img/marker-excellent.png"&gt;
          &lt;/marker&gt;
  
          &lt;info-window id="marker-info"&gt;
              &lt;div ng-non-bindable=""&gt;
                  &lt;h5&gt;{{vm.school.name}}&lt;/h5&gt;
              &lt;/div&gt;
          &lt;/info-window&gt;
      &lt;/ng-map&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here this creates multiple markers with the same marker icon. I want to use different marker icons based on the value of {{school.rating}}. However I am not able to figure out how to change the marker icon url based on the value of rating while the ng-repeat is in action to render the markers on the map.</p>
  
  <p>Currently, I am doing the following, but I think this is an inefficient method of doing it.</p>
  
  <pre><code>&lt;div id="map-canvas"&gt;
      &lt;ng-map default-style="true"&gt;
          &lt;marker id='ID{{school.id}}' ng-if="school.overallRating &gt;= 4.5" ng-repeat="school in filteredSchools = (search.schools | filter:boardsFilter)" position="{{school.location}}" on-click="search.showDetail(school)" icon="assets/img/marker-excellent.png"&gt;
          &lt;/marker&gt;
  
          &lt;marker id='ID{{school.id}}' ng-if="school.overallRating &lt; 4.5 &amp;&amp; school.overallRating &gt;= 3.5" ng-repeat="school in filteredSchools = (search.schools | filter:boardsFilter)" position="{{school.location}}" on-click="search.showDetail(school)" icon="assets/img/marker-good.png"&gt;
          &lt;/marker&gt;
  
          &lt;marker id='ID{{school.id}}' ng-if="school.overallRating &lt; 3.5 &amp;&amp; school.overallRating &gt;= 2.0" ng-repeat="school in filteredSchools = (search.schools | filter:boardsFilter)" position="{{school.location}}" on-click="search.showDetail(school)" icon="assets/img/marker-average.png"&gt;
          &lt;/marker&gt;
  
          &lt;info-window id="marker-info"&gt;
              &lt;div ng-non-bindable=""&gt;
                  &lt;h5&gt;{{vm.school.name}}&lt;/h5&gt;
              &lt;/div&gt;
          &lt;/info-window&gt;
      &lt;/ng-map&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here, I have put multiple marker directives each having ng-repeat but different conditions using ng-if</p>
  
  <p>I am wondering if there is a more efficient way to do it using a single marker directive with ng-repeat</p>