Dynamic id name - angularjs

Question

I got this template:
<ion-view view-title="MAP" name="tab-map">
<ion-content has-tabs="true" style="text-align:center;">
<div style="width:100%;height:400px;" ng-attr-id="{{'canvas_map_'+place.id}}"></div>
</ion-content>
</ion-view>
and I'm trying to set div's content dynamically by passing through controller:
angular.module('helloDynamicMap', ['ionic'])
.config(function ($stateProvider, $urlRouterProvider, $ionicConfigProvider) {
$ionicConfigProvider.navBar.alignTitle('center');
$ionicConfigProvider.tabs.position('bottom');
$ionicConfigProvider.backButton.text('').icon('ion-chevron-left');
$ionicConfigProvider.backButton.previousTitleText(false);
$stateProvider
.state('main', {
url: "/main",
controller: "PlacesCtrl",
//abstract: true,
templateUrl: 'templates/main.html',
resolve: {
resultPlaces: function (findPlace, $stateParams) {
return findPlace.all();
}
}
})
.state('place', {
url: "/place/:placeId",
//abstract: true,
templateUrl: 'templates/place-tabs.html',
controller: 'PlaceCtrl',
resolve: {
resultPlace: function (findPlace, $stateParams) {
return findPlace.get($stateParams.placeId);
}
}
})
.state('place.details', {
url: '/details',
views: {
'tab-details': {
templateUrl: 'templates/details.html'
},
}
})
.state('place.map', {
url: '/map',
views: {
'tab-map': {
templateUrl: 'templates/map.html' //,
//controller: "MapCtrl"
}
}
});
$urlRouterProvider.otherwise("/main");
})
.controller('AppCtrl', function ($scope, $state, $rootScope) {
// button back
$scope.goBack = function () {
console.log("back button");
$state.go("main");
}
})
.controller('PlacesCtrl', function ($scope, $rootScope, $state, resultPlaces) {
// Get places
$scope.places = resultPlaces;
// Button back
$scope.goTabs = function () {
$state.go("tab.map");
}
})
.controller('PlaceCtrl', function ($scope, $rootScope, $state, resultPlace) {
// Load place's data in scope's model
$scope.place = resultPlace;
var div = document.getElementById("canvas_map_" + resultPlace.id);
console.log("div", div);
// Create Map
var map;
document.addEventListener("deviceready", function () {
var div = document.getElementById("canvas_map_" + resultPlace.id);
// Initialize the map view
map = plugin.google.maps.Map.getMap(div);
// Wait until the map is ready status.
map.addEventListener(plugin.google.maps.event.MAP_READY, onMapReady);
}, false);
function onMapReady() {
var button = document.getElementById("button_" + resultPlace.id);
button.addEventListener("click", onBtnClicked, false);
}
function onBtnClicked() {
map.showDialog();
}
})
.factory('findPlace', function ($q) {
// list all places
var places = [];
places = [{
id: "1",
name: "Place A",
details: "details for Place A",
latitude: "28.472143",
longitude: "-81.469856"
}, {
id: "2",
name: "Place B",
details: "details for Place B",
latitude: "",
longitude: ""
}, {
id: "3",
name: "Place C",
details: "details for Place C",
latitude: "",
longitude: ""
}];
return {
all: function () {
var dfd = $q.defer();
// resolve promise
dfd.resolve(places);
// return promise
return dfd.promise;
},
get: function (placeId) {
for (var i = 0; i < places.length; i++) {
if (places[i].id == parseInt(placeId)) {
return places[i];
}
}
return null;
}
}
})
This code works perfectly when I use static id name as "canvas_map_01", but doesn't works when I tries to set it through scope variables.
The main question is how to set and handle div elements through dynamic id name:
// Load place's data in scope's model
$scope.place = resultPlace;
var div = document.getElementById("canvas_map_" + resultPlace.id);
console.log("div", div);
My full code is on Github, please somebody can tell me what am I doing wrong?

Answer 1

-Change your html from
ng-attr-id="{{'canvas_map_'+place.id}}"
To
id="{{'canvas_map_'+place.id}}"
-Change your code from
var div = document.getElementById("canvas_map_" + resultPlace.id);
To
var div = angular.element("#canvas_map_" + resultPlace.id);
Than it will work fine