Angular + Яндекс API Карт

Второй день пытаюсь заставить AngularJS показать Яндекс Карту с помощью ya-maps
Причина по которой я не могу это сделать, возможно самая тривиальная, посему, прошу меня не винить, я впервые узнал что такое Angular позавчера, а Яндекс API открыл для себя вчера, и учитывая, что через месяц проект должен летать - времени на скрупулезное изучение нет.
Приведу свой код, буду премного благодарен, если вы его подправите так, чтобы он заработал.
index.html

script.js
console.log("script starts");
var myApp = angular .module('myApp', ['yaMap']) .controller("myController", function ($scope) { console.log("In the controller"); var _map;
$scope.afterMapInit = function (map) { _map = map; }; $scope.del = function () { _map.destroy(); };
console.log("After $scope ops");
$scope.initialize = function () { var mapOptions = { center: [50.5, 30.5], zoom: 8 }; ymaps.ready(function () { $scope.map = new ymaps.Map("map", mapOptions); }) } });
Надеюсь на вашу помощь!

Ответ

Проблема заключается в том, что у нестандартных тегов по умолчанию стоит display:inline - возможно значение отличается в разных браузерах. Поэтому не работало выставление размеров, и так как внутри не было текста - элемент схлопывался в ширину - 0, высоту - 0.
Далее, в приведенном скрипте из трех функций - не выполняется ни одна.
Посмотрите страницу с примерами
var myApp = angular .module('myApp', ['yaMap']) .controller("myController", function($scope) { var _map; $scope.afterMapInit = function(map) { _map = map; }; $scope.del = function() { _map.destroy(); }; }); ya-map { display: block; width: 400px; height: 500px; }