I am getting image map from the server and trying to display contents using ng-bind-html. while rendering AngularJS removes name attribute from map tag. Therefore user clicks are not affective in map.
<body ng-app="imgMapExample">
<div ng-controller="ExController">
<p ng-bind-html="ImgData"></p>
</div>
</body>
angular.module('imgMapExample', ['ngSanitize'])
.controller('ExController', ['$scope', function($scope) {
var imgPath = "http://www.w3schools.com/tags/";
var imgPlanet = imgPath + "planets.gif";
var imgSun = imgPath + "sun.htm";
var imgvenus = imgPath + "venus.htm";
var imgmercur = imgPath + "mercur.htm";
var ImgTag = '<img src="' + imgPlanet + '" width="145" height="126" alt="Planets" usemap="#planetmap" />';
var imgMap = '<map name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="Sun" href="' + imgSun + '"> <area shape="circle" coords="90,58,3" alt="Mercury" href="' + imgmercur + '"> <area shape="circle" coords="124,58,8" alt="Venus" href="' + imgvenus + '"> </map>';
var imgMapTest = '<map name="planetmap"></map>';
$scope.ImgData = ImgTag + imgMap;
}]);
Used $sce.trustAsHtml(ImgTag + imgMap); until Angular will update the code not to remove name attribute.