javascript - Angular-google-maps: How to show Title and Description dynamically on markers -

i using angular-google-maps, html code follows

  <ui-gmap-google-map center='mapdata.map.center' zoom='mapdata.map.zoom'    events="mapevents">     <ui-gmap-markers models="mapdata.map.markers" coords="'self'">     </ui-gmap-markers>   </ui-gmap-google-map> 

in js calling

angular.extend(this, $controller('mapsmixincontroller',  {$scope:$scope, map:mapdata.data[0].map})); 

mapsmixincontroller follows. calling controller js code. markers showing & on click able mark.

mapsmixincontroller.js

/**  * controller providing common behaviour other map controllers  */ angular     .module('app')     .controller('mapsmixincontroller', ['$scope', 'geolocationservice', 'uigmapgooglemapapi', 'map',         function($scope, geolocationservice, googlemapapi, map) {             var _this = this;              $scope.mapevents = {                 click: function(mapmodel, eventname, originaleventargs) {                     var e = originaleventargs[0];                     if (e.latlng) {                         $scope.mapdata.map.markers.push({                             id: new date().gettime(),                             latitude: e.latlng.lat(),                             longitude: e.latlng.lng()                         });                         // event outside angular boundary, hence need call $apply here                         $scope.$apply();                     }                 }             };              // returns default map based on position sent parameter             this.getdefaultmap = function(position) {                 return {                     markers: [],                     center: {                         latitude: position.coords.latitude,                         longitude: position.coords.longitude                     },                     zoom: 14                 };             };              // initialize google maps api , configure map             googlemapapi.then(function() {                 geolocationservice().then(function(position) {                     $scope.mapdata.map = map || _this.getdefaultmap(position);                 }, function() {                     $scope.error = "unable set map data"; // todo use translate                 });             });         }     ]); 

how can show title on mouse hover on markers? , on click how show description on markers?

you can add title property alone latitude , longtitude property while creating marker data.

    /**  * controller providing common behaviour other map controllers  */ angular     .module('app')     .controller('mapsmixincontroller', ['$scope', 'geolocationservice', 'uigmapgooglemapapi', 'map',         function($scope, geolocationservice, googlemapapi, map) {             var _this = this;              $scope.mapevents = {                 click: function(mapmodel, eventname, originaleventargs) {                     var e = originaleventargs[0];                     if (e.latlng) {                         $scope.mapdata.map.markers.push({                             id: new date().gettime(),                             latitude: e.latlng.lat(),                             longitude: e.latlng.lng(),                             title: "mouse on text"                         });                         // event outside angular boundary, hence need call $apply here                         $scope.$apply();                     }                 }             };              // returns default map based on position sent parameter             this.getdefaultmap = function(position) {                 return {                     markers: [],                     center: {                         latitude: position.coords.latitude,                         longitude: position.coords.longitude                     },                     zoom: 14                 };             };              // initialize google maps api , configure map             googlemapapi.then(function() {                 geolocationservice().then(function(position) {                     $scope.mapdata.map = map || _this.getdefaultmap(position);                 }, function() {                     $scope.error = "unable set map data"; // todo use translate                 });             });         }     ]);