My goal is to invoke the inner function of an Angular controller.
index.html
<script type="text/javascript>
$(document).ready(function() {
$('#example').multiselect({
onChange: function(option, checked, select) {
//alert('Changed option ' + $(option).val() + '.');
var scope = angular.element(document.getElementById("MainWrap")).scope();
var n = $(option).val();
scope.$apply(function () {createMarker(data[n-1]);});
}
});
});
</script>
controller.js
var mapApp = angular.module('mapApp', []);
mapApp.controller('mapContainer',function($scope){
var mapOptions = {
zoom: 10,
center: new google.maps.LatLng(12,77),
mapTypeId: google.maps.MapTypeId.TERRAIN
}
$scope.map = new google.maps.Map(document.getElementById('map'), mapOptions);
$scope.markers = [];
var createMarker = function (info){
var marker = new google.maps.Marker({
map: $scope.map,
position: new google.maps.LatLng(info.lat, info.long),
name: info.name
});
$scope.markers.push(marker);
};
});
I am able to console log data inside mapApp.controller, however, when I try to call the createMarker function, it shows an error: "createMarker is not defined." I followed this example for exposing the controller: http://jsfiddle.net/austinnoronha/nukRe/light/