AngularJS Ionic Leaflet - Map markers not showing - angularjs

Question

So Ive been trying to get leaflet working in an Ionic app and everything is working fine except my markers. They are not being shown in the default screen nor the locate() function. below is my code
html snippet
<leaflet defaults="map.defaults" center="map.center" markers="map.markers" ng-if="map"></leaflet>
controller
app.controller('MapController',function($scope, $cordovaGeolocation, $stateParams) {
$scope.$on("$stateChangeSuccess", function() {
$scope.map = {
defaults: {
tileLayer: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
maxZoom: 18,
zoomControlPosition: 'bottomleft'},
center: {
lat : 20.6219444444,
lng : -105.228333333,
zoom : 15},
markers: {
lat : 20.6219444444,
lng : -105.228333333,
message: "Puerto Vallarta, MX",
focus: true,
draggable: false}
};
});
$scope.locate = function(){
$cordovaGeolocation
.getCurrentPosition()
.then(function (position) {
$scope.map.center.lat = position.coords.latitude;
$scope.map.center.lng = position.coords.longitude;
$scope.map.center.zoom = 16;
$scope.map.markers.now = {
lat:position.coords.latitude,
lng:position.coords.longitude,
message: "You Are Here",
focus: true,
draggable: false
};
}, function(err) {
// error
console.log("Location error!");
console.log(err);
});
};
});
any ideas?? thanks for looking

Answer 1

SOLVED
I added marker value to a variable and then copied that into the $scope.map
here is the updated working controller
app.controller('MapController',function($scope, $cordovaGeolocation, $stateParams) {
$scope.$on("$stateChangeSuccess", function() {
var mainMarker = {
lat: 20.6219444444,
lng: -105.228333333,
focus: true,
message: "Puerto Vallarta, MX",
draggable: false};
$scope.map = {
defaults: {
tileLayer: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
maxZoom: 18,
zoomControlPosition: 'bottomleft'},
center: {
lat : 20.6219444444,
lng : -105.228333333,
zoom : 15},
markers: {
mainMarker: angular.copy(mainMarker)}
};
});
$scope.locate = function(){
$cordovaGeolocation
.getCurrentPosition()
.then(function (position) {
$scope.map.center.lat = position.coords.latitude;
$scope.map.center.lng = position.coords.longitude;
$scope.map.center.zoom = 16;
$scope.map.markers.now = {
lat:position.coords.latitude,
lng:position.coords.longitude,
message: "You Are Here",
focus: true,
draggable: false
};
}, function(err) {
// error
console.log("Location error!");
console.log(err);
});
};
});