title: Angular JS and Twitter API, how can we hook them up
body: <p>I've been trying to connect <a href="http://angularjs.org" rel="nofollow">AngularJS</a> and <a href="http://dev.twitter.com" rel="nofollow">Twitter API</a>. It all started with following the instructions on <a href="http://youtu.be/IRelx4-ISbs" rel="nofollow">John Lindquist's video</a> on AngularJS twitter search. Which is basically the following code</p>
  
  <pre><code>var app = angular.module("MyApp", ["ngResource"]);
  
  function MyCtrl($scope, $resource) {
    var TwitterAPI = $resource("http://search.twitter.com/search.json",
      { callback: "JSON_CALLBACK" },
      { get: { method: "JSONP" }});
  
    $scope.search = function() {
      $scope.searchResult = TwitterAPI.get({ q: $scope.searchTerm });
    };
  }
  </code></pre>
  
  <p>But the problem is, this generates a 401 Unauthorized. A few searches on google revealed that Twitter had changed its API since this tutorial had been posted. I found another article on using <a href="http://beautifulbytes.wordpress.com/2013/06/18/oauth2-with-angularjs-to-access-twitter/" rel="nofollow">OAuth2 with AngularJS to access Twitter</a>. Which has the following</p>
  
  <pre><code>var consumerKey = encodeURIComponent('&lt;your consumer key&gt;')
  var consumerSecret = encodeURIComponent('&lt;your consumer secret&gt;');
  var credentials = Base64.encode(consumerKey + ':' + consumerSecret);
  
  // Twitters OAuth service endpoint
  var twitterOauthEndpoint = $http.post(
    'https://api.twitter.com/oauth2/token'
    , "grant_type=client_credentials"
    , {headers: {'Authorization': 'Basic ' + credentials, 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'}}
  );
  </code></pre>
  
  <p>However this also ended up with the following error on the console</p>
  
  <pre><code>&gt; OPTIONS https://api.twitter.com/oauth2/token 405 (Method Not Allowed) 
  &gt; XMLHttpRequest cannot load https://api.twitter.com/oauth2/token. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:3000' is therefore not allowed access. 
  </code></pre>
  
  <p>I've gone this far, but don't know what to do next to get search results using $resource from twitter. Don't know if this helps, but I'm also using Firebase.</p>