JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-controller="testController">
    <span>zoom: {{zoom}}</span>
</div>

JavaScript

var app = angular.module('myApp', []);
app.factory('map', function(){
    return {
        zoomLevel: 8  
    };
});

angular.bootstrap(document, ['myApp']);

function testController($scope, map){
    $scope.zoom = map.zoomLevel;
}

// how to configure the map factory externally
// using values from c# server side exposed properties
// something like

/*
var mapFactory = getMapFactoryFromAngular();
mapFactory.zoomLevel = <%= ZoomLevel %>;
*/