javascript - Cant change JS slider to Angular directive -

i have problem change slider angular. here code works:

<div id="main-img" class="main-img">     <img id="img" src="image.jpg"> </div> <div id="thumb-img" class="thumb-img" >     <img src='image.jpg' onclick='changeimage("image.jpg");'>     <img src='image1.jpg'  onclick='changeimage("image1.jpg");'> </div>  <script>     function changeimage(a) {         document.getelementbyid("img").src=a;     } </script> 

and when need angular change , not working:

<div id="main-img" class="main-img">         <img id="img" ng-src="{{some.image1}}">     </div>     <div id="thumb-img" class="thumb-img" >         <img ng-src='{{some.image1}}'  ng-click='changeimage("{{some.image1}}");'>         <img ng-src='{{some.image2}}'  ng-click='changeimage("{{some.image2}}");'>      <script>         function changeimage(a) {             document.getelementbyid("img").src=a;         }     </script> 

what i'm doing wrong?

ng-click angular directive needs function calling changeimage in scope of controller. created working example code can check here. https://jsfiddle.net/9bz4lwxa/112/

basically "angularize" have create controller , add method want call on click scope.

javascript:

angular.module('demoapp', []) .controller('slidercontroller', ["$scope",function ($scope) {     $scope.changeimage = function (a) {        document.getelementbyid("img").src= a;     }; }]); 

html:

<div ng-app="demoapp" ng-controller="slidercontroller">   <div id="main-img" class="main-img">     <img id="img" src="image1.jpg">   </div>    <div id="thumb-img" class="thumb-img">     <img src='image1.jpg' ng-click='changeimage("image1.jpg");'>     <img src='image2.jpg' ng-click='changeimage("image2.jpg");'>   </div>  </div>