title: How to zoom image with angularJS
body: <p>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: <a href="https://github.com/owlsomely/angular-image-zoom?utm_source=angular-js.in&amp;utm_medium=website&amp;utm_campaign=content-curation" rel="nofollow">https://github.com/owlsomely/angular-image-zoom?utm_source=angular-js.in&amp;utm_medium=website&amp;utm_campaign=content-curation</a> . Anyone can help?</p>
  
  <p>My js file:</p>
  
  <pre><code>var camListApp = angular.module('camListApp', ['ui.bootstrap'])
  
  camListApp.filter('unique', function() {
      return function(input, key) {
          var unique = {};
          var uniqueList = [];
          for(var i = 0; i &lt; 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; 
      });
   }]);
  </code></pre>
  
  <p>My html file:</p>
  
  <pre><code> &lt;div ng-controller="Hello" class="col-xs-12"&gt;
  
  
   &lt;b&gt;Search:&lt;/b&gt;&lt;br&gt;
  
  &lt;input type = "text" ng-model="searchBox" uib-typeahead="state.cameraid as state.cameraid for state in records | filter:searchBox | limitTo:8 | unique:'cameraid'"&gt;
  
  
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
   &lt;table border = 1 class="table table-striped table-hover" style="width:45%"&gt;
      &lt;thead&gt;
        &lt;tr&gt;
  
          &lt;th&gt;&lt;center&gt;CamID&lt;/th&gt;&lt;/center&gt;
          &lt;th&gt;&lt;center&gt;Timestamp&lt;/th&gt;&lt;/center&gt;
          &lt;th&gt;&lt;center&gt;View Image&lt;/center&gt;&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
  
      &lt;tbody&gt;
        &lt;tr ng-repeat="record in records | filter:searchBox | orderBy:'+timestamp'"&gt;
  
          &lt;td&gt;{{record.cameraid}}&lt;/td&gt;
          &lt;td&gt;{{record.timestamp}}&lt;/td&gt;
          &lt;td&gt;&lt;center&gt; &lt;button class="btn btn-primary" ng-click="toggleCustom(record.filename)" onclick="myFunction()"&gt;View&lt;/center&gt;&lt;/button&gt;&lt;/td&gt;
        &lt;/tr&gt;
  
  
      &lt;/tbody&gt;
    &lt;/table&gt;
  
     &lt;span id="myDIV" ng-hide="custom"&gt;
     &lt;img ng-src="http://localhost:9100/Images/{{imageView}}.png" image-zoom width="500" height="400"&gt;
      &lt;/span&gt;
  
      &lt;!--&lt;span ng-hide="custom"&gt;To:
          &lt;input type="text" id="to" /&gt;
      &lt;/span&gt;--&gt;
      &lt;span ng-show="custom"&gt;&lt;/span&gt;
  &lt;/div&gt;
  &lt;script&gt;
  function myFunction() {
  document.getElementById("myDIV").style.position = "absolute";
  }
  &lt;/script&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>