title: How to Use ngRepeat with Open Layers
body: <p>I'm doing a project using AngularJS 1.5.8 and OpenLayers3. </p>
  
  <p>I'm able to display the map and set the various map components. However when I set a control on the map that has either ng-repeat or ng-if directives, nothing is displayed. When I test the code outside of the map (not as a control) it works fine. </p>
  
  <p>I have already looked at the <a href="https://github.com/tombatossals/angular-openlayers-directive" rel="nofollow">angular-openlayers-directive</a> project but I think it has too little activity to depend on it for my project.</p>
  
  <p>The JSFiddle link is <a href="https://jsfiddle.net/ecszdd4y/40/" rel="nofollow">here</a>. And the same code below:</p>
  
  <pre><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.18.2/ol.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.18.2/ol.css"&gt;&lt;/link&gt;
  &lt;style&gt;
       .lister {
           top: 5em;
           left: 0.5em;
       }
  &lt;/style&gt;
  &lt;div ng-app="myApp"&gt;
      &lt;div ng-controller="MapsController"&gt;
  
          &lt;div id="map" class="map"&gt;&lt;/div&gt;
  
          &lt;div id="lister" class="lister ol-unselectable ol-control"&gt;
              &lt;div ng-repeat="item in items" ng-click="showMarkerPopup($index)"&gt;
        {{item.name}}
              &lt;/div&gt; 
          &lt;/div&gt;
  
          &lt;div id="other" class="other ol-unselectable ol-control"&gt;
              Other Object
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>var app = angular.module('myApp', []);
  
  app.controller('MapsController',['$scope','$window','$compile',function($scope,$window,$compile){
     var lister = angular.element(document.querySelector('#lister'));
    $compile(lister)($scope);
  
    var listerControl = new $window.ol.control.Control({
      element: $window.document.getElementById('lister')
    });
  
    $scope.items = [{
      name: "ball",
      color: "blue"
    }, {
      name: "tree",
      color: "green"
    }, {
      name: "house",
      color: "red"
    }];
  
    $window.map = new $window.ol.Map({
      layers: [new $window.ol.layer.Tile({
        source: new $window.ol.source.OSM()
      })],
      target: 'map',
      view: new $window.ol.View({
        center: window.ol.proj.transform([36.823219, -1.288811], 'EPSG:4326', 'EPSG:3857'),
        zoom: 10
      })
    });
  
    $window.map.addControl(listerControl);
  
  }]);
  </code></pre>
  
  <p>The other control I have placed works fine. And any other that have angular bindings except the ng-repeat and ng-if directives. </p>
  
  <p>Help me look at what I could be doing wrong.</p>