Q:

AngularJS Access DOM from service

I have an AngularJS page which renders a map using OpenLayers.
I am looking to add an overlay to the map so that it can be clicked to display some information. Unfortunately I can't seem to reference the DOM elements required from the service.
I am trying to avoid putting a <script> tag inside the HTML partial for the page.
If anyone has a better way of doing this I am all ears. I am new to AngularJS.
main.html (partial)
<h2>My Map</h2>
<div id="map" class="map"></div>
<div id="popup" class="ol-popup">
  <a href="#" id="popup-closer" class="ol-popup-closer"></a>
  <div id="popup-content"></div>
</div>

<script src="Stylesheets/map.css"></script>

main.ctrl.js
angular.module("app").controller("MainController", function($scope, openlayers){
    openlayers.init();
    $scope.selected = openlayers.selected;
});

openlayers.js
angular.module("app").factory("openlayers", function($document){

    var init = function(){

        /*
         * Elements that make up the popup.
         */
        var container = $document[0].getElementById('popup');
        var content = $document[0].getElementById('popup-content');
        var closer = $document[0].getElementById('popup-closer');
    };

    return {
        init: init,
        selected: activeVector,
        cities: cities
    };

});

A:

Access the service via DOM is not a good practice . The service should be used to communicate data between controlers and not to change DOM data. If you want to create a generic method can create a module "commons" to encapsulate them and provide access to other controllers.
It is possible for you to use a directive to manipulate DOM data. This is recommended when you want to write elements / behavior from custom elements.
Look this example with directive:
angular.module('app').controller('MainController', function($scope, openlayers){
    console.log('Container: ' + $scope.container);
    console.log('Content:   ' + $scope.content);
    console.log('Closer:    ' + $scope.closer);
});

angular.module('app', []).directive('openlayersDirective',  function() {
    return {
        link: function($scope, element) {
            var init = function(){
                $scope.container = angular.element(element).find('#popup');
                $scope.content   = angular.element(element).find('#popup-content');
                $scope.closer    = angular.element(element).find('#popup-closer');
            };
        }
    };
});

In html put directive:
<body openlayersDirective>
    <div>
        .
        .
        .
    </div>
</body>

