title: Angular JS and Tracking.js face detection
body: <p>I am implementing one MEAN app and I would like to detect the faces from a photo by using this app. So externally, I tried and successfully implemented face detection by using tracking.js. Now I would like to integrate that implementation in MEAN app. So let me know how to inject non angular dependencies to a controller because I need to use tracking.js here. </p>
  
  <p>Here's some of my code.</p>
  
  <p>main module (mainApp.js):</p>
  
  <pre><code> var fbApp;
   (function(){
  fbApp = angular.module("fbApp",['angularFileUpload','ngRoute'])
  .config(function($routeProvider, $locationProvider) {
            $routeProvider
             .when('/', {
              templateUrl: '../views/login/login.html',
              controller: 'LoginController',
            })
            .when('/home', {
                  templateUrl: '../views/home/home.html',
                  controller: 'HomeController',
            });
      });
  })();
  </code></pre>
  
  <p>I injected FileUploader dependency here but that is an angular module, I am little bit confused with tracking.js file's dependency. </p>
  
  <p>In the same app, I detected face without using angularjs' controller, But that time, the id of the image was static while now it is dynamic.</p>
  
  <p>My main controller:</p>
  
  <pre><code> (function(){
  
       fbApp.controller('HomeController',
                        ['$scope','$location','$routeParams', 
                         'HomeService','FileUploader',
                        function ($scope,$location,
                                  $routeParams,HomeService,
                                   FileUploader){
  
            // here are my functions which controls several home contents
            $scope.getFace = function(feed){
               here I need to get tracking.js help so I am little bit of doubt because of lack of knowledge.
            }
  
  
      }
    ]);
  
   })();
  </code></pre>
  
  <p>Home service is a service which I used for call APIs, so I just want to use the tracking.js dependency and use the following logic in the home controller</p>
  
  <pre><code>function getFace(){
  
    var img = document.getElementById('feed_image'+id);
  
    var tracker = new tracking.ObjectTracker(['face']);
    tracker.setStepSize(1.5);
  
    tracking.track('#feed_image'+id, tracker);
  
    tracker.on('track', function(event) {
      console.log(event);
      event.data.forEach(function(rect) {
        window.plot(rect.x, rect.y, rect.width, rect.height);
      });
    });
  
    window.plot = function(x, y, w, h) {
      var rect = document.createElement('div');
      document.querySelector('.card_view_body ').appendChild(rect);
      rect.classList.add('rect');
      rect.style.width = w + 'px';
      rect.style.height = h + 'px';
      rect.style.left = (img.offsetLeft + x) + 'px';
      rect.style.top = (img.offsetTop + y) + 'px';
    };
   }
  </code></pre>
  
  <p>The home.html phot container div:</p>
  
  <pre><code>      &lt;div ng-repeat="feed in userFeeds"&gt;
              &lt;div class="card_view"&gt;
                  &lt;div class="card_view_head clearfix"&gt;
                      &lt;img class="img-circle" src="{{feed.feedOwnerPic}}" alt="" /&gt;
                      &lt;h4&gt;{{feed.feedOwnerName}}&lt;/h4&gt;
                  &lt;/div&gt;
                  &lt;div class="card_view_body"&gt;
                         &lt;!-- &lt;img id="feed_image}" src="{{feed.feedPhotoUrl}}" alt="Select a Photo" onclick="getFace()" class="img-responsive"&gt;--&gt;
                         &lt;img id="{{feed._id}}" src="{{feed.feedPhotoUrl}}" alt="Select a Photo" ng-click="getFace(feed)" class="img-responsive"&gt;
                      &lt;div class="form-group"&gt;
                          &lt;p&gt;{{feed.feedDescription}}&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>I added all angular dependencies and tracking.min.js related to this DOM to the main view, that's how I got face detection for the single image.</p>
  
  <p>Please look at the img tag's id, which is dynamic, previously it was static because I tried it for 1 image and kept getFace() method, which is in another js file.</p>
  
  <p>I am a newbie in javascript and angular js. </p>
  
  <p>I Am using angular 1.6 version.</p>
  
  <p>How to use tracking.js with angularjs?</p>