angular-esri-map Feature layer URL from scope

Demonste how to get a Feature Layer URL from scope

by tomwayson

HTML

<script src="https://js.arcgis.com/3.14compact"></script>
<link rel="stylesheet" href="https://js.arcgis.com/3.14/esri/css/esri.css">
<script src="https://esri.github.io/angular-esri-map/lib/angular-esri-map.js"></script>
<div ng-controller="MapController">
    <esri-map id="map" center="map.center" zoom="map.zoom" basemap="topo">
        <esri-feature-layer url="http://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/Portland_Parks/FeatureServer/0"></esri-feature-layer>
        <esri-feature-layer url="{{map.topLayerUrl}}"></esri-feature-layer>
    </esri-map>
    <p><button ng-click="loadLayer()">Load Different Layer</button></p>
    <p>Lat: {{ map.center.lat | number:3 }}, Lng: {{ map.center.lng | number:3 }}, Zoom: {{map.zoom}}</p>
</div>

JavaScript

// uses angular-esri-map module, see:
// https://github.com/Esri/angular-esri-map
angular.module('esri-map-example', ['esri.map'])
    .controller('MapController', function ($scope) {
    	// initialize map w/ trees
        $scope.map = {
            center: {
                lng: -122.676207,
                lat: 45.523452
            },
            zoom: 12,
            topLayerUrl: 'http://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/Heritage_Trees_Portland/FeatureServer/0'
        };

    	// quickly switch to light rail before angular notices
    	// i was surprised this worked, must have been in same digest cycle
        $scope.map.topLayerUrl = 'http://services.arcgis.com/uCXeTVveQzP4IIcx/arcgis/rest/services/Light_Rail_Lines/FeatureServer/0';

    // load trees again
    	// not going to work
    	$scope.loadLayer = function() {
            console.log($scope.map.topLayerUrl);
            $scope.map.topLayerUrl = 'http://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/Heritage_Trees_Portland/FeatureServer/0'; 
console.log($scope.map.topLayerUrl);
        }
    });