title: How to integrate Phonegap Camera with AngularJS
body: <p>I'm trying to figure out the best practice for integrating the phonegap camera with AngularJS.  The first method I tried was creating a factory with promises that gets called from ng-click. Another way would be putting the code right inside the ng-click within the controller, but then it isn't reusable. Maybe a directive could be made from this? I'm sure there's a few other ways as well.  What would the "angularjs" way be?</p>
  
  <p>Here's an example of the factory method that I tried....</p>
  
  <p>The HTML:</p>
  
  <pre><code>&lt;button ng-click="takepic"&gt;Take Picture&lt;/button&gt;
  </code></pre>
  
  <p>The controller:</p>
  
  <pre><code>function picturePageCtrl($scope, Camera) {
      $scope.takepic = function() {
          // I'd like to push this into an array of "pics" here.
          // but it is hard to push() with promises.
          Camera.getPic();
      }
  }
  </code></pre>
  
  <p>The factory:</p>
  
  <pre><code>.factory('Camera', function($q) {
      var deferred = $q.defer();
      return {
          getPic: function() {
              navigator.camera.getPicture(
                  function (imageURI) {
                      deferred.resolve(imageURI);
                  },
                  function (message) {
                      deferred.reject(message);
                  },
                  {
                      quality: 50, 
                      destinationType: Camera.DestinationType.FILE_URI
                  }
              );
              return deferred.promise;
          }
      }
  })
  </code></pre>