javascript - Prevent Area Tag Page Reload on Angular Ng-Click -

i've got image associated link map. 1 area tag have in there has ng-click on it. currently, when click ng-click, function links runs, page reloads. how prevent page reloading in process?

i've added $event.stoppropagation() prevent page reload, it's not working reason. here's html:

<div ng-app="programapp" ng-controller="programcontroller">   <img src="http://placehold.it/350x150" usemap="#testmap">    <map name="testmap">     <area shape="rect" coords="0,0,350,150" href="" ng-click="slideclick($event)">   </map> </div> 

and angular:

angular.module('programapp', [     'programapp.controllers', ]); angular.module('programapp.controllers', [])     .controller('programcontroller', ['$scope',       function($scope){        $scope.slideclick = function($event){         $event.stoppropagation();         console.log('this ran');       };     }]); 

the console log runs, showing function runs. however, page still reloads. how prevent this?

see codepen here.

i not sure if stoppropagation() required other functionality, think should $event.preventdefault() instead.