javascript - How to zoom image with angularJS

Question

How can i zoom the image when i click on the image itself using angularJS. I cant happen to do it when i using this website given: https://github.com/owlsomely/angular-image-zoom?utm_source=angular-js.in&utm_medium=website&utm_campaign=content-curation . Anyone can help?

My js file:

var camListApp = angular.module('camListApp', ['ui.bootstrap'])

camListApp.filter('unique', function() {
    return function(input, key) {
        var unique = {};
        var uniqueList = [];
        for(var i = 0; i < input.length; i++){
            if(typeof unique[input[i][key]] == "undefined"){
                unique[input[i][key]] = "";
                uniqueList.push(input[i]);
            }
        }
        return uniqueList;
    };
});
camListApp.controller("Hello", ["$scope", "$http", function($scope, $http){ 

$scope.custom = true;
$scope.toggleCustom = function(url) {
    $scope.custom = ! $scope.custom;
     $scope.imageView = url;

};



$http.get('http://localhost:8082/camera/list').then(function(response) {
     console.log(response);
        $scope.records= response.data; 
    });
 }]);

My html file:

 <div ng-controller="Hello" class="col-xs-12">


 <b>Search:</b><br>

<input type = "text" ng-model="searchBox" uib-typeahead="state.cameraid as state.cameraid for state in records | filter:searchBox | limitTo:8 | unique:'cameraid'">


<br>
<br>
<br>
<br>
 <table border = 1 class="table table-striped table-hover" style="width:45%">
    <thead>
      <tr>

        <th><center>CamID</th></center>
        <th><center>Timestamp</th></center>
        <th><center>View Image</center></th>
      </tr>
    </thead>

    <tbody>
      <tr ng-repeat="record in records | filter:searchBox | orderBy:'+timestamp'">

        <td>{{record.cameraid}}</td>
        <td>{{record.timestamp}}</td>
        <td><center> <button class="btn btn-primary" ng-click="toggleCustom(record.filename)" onclick="myFunction()">View</center></button></td>
      </tr>


    </tbody>
  </table>

   <span id="myDIV" ng-hide="custom">
   <img ng-src="http://localhost:9100/Images/{{imageView}}.png" image-zoom width="500" height="400">
    </span>

    <!--<span ng-hide="custom">To:
        <input type="text" id="to" />
    </span>-->
    <span ng-show="custom"></span>
</div>
<script>
function myFunction() {
document.getElementById("myDIV").style.position = "absolute";
}
</script>


</body>
</html>

Answer 1

Created ng-click on image

HTML

    <span id="myDIV" ng-hide="custom">
   <img id="view" ng-src="http://www.w3schools.com/css/{{imageView}}" width="300" height="300" ng-click="zoom()">
    </span>

JS

 $scope.zoom = function() {
    var imageId = document.getElementById('view');
    if(imageId.style.width == "400px"){
    imageId.style.width = "300px";
    imageId.style.height = "300px";
    }else{
     imageId.style.width = "400px";
    imageId.style.height = "400px";  
    }

Codepen- http://codepen.io/nagasai/pen/jrMzER