title: What is the difference between Polymer elements and AngularJS directives?
body: <p>On the Polymer <a href="http://www.polymer-project.org/docs/start/usingelements.html" rel="noreferrer">Getting Started</a> page, we see an example of Polymer in action:</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;!-- 1. Shim missing platform features --&gt;
      &lt;script src="polymer-all/platform/platform.js"&gt;&lt;/script&gt;
      &lt;!-- 2. Load a component --&gt;
      &lt;link rel="import" href="x-foo.html"&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;!-- 3. Declare the component by its tag. --&gt;
      &lt;x-foo&gt;&lt;/x-foo&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>What you will notice is <code>&lt;x-foo&gt;&lt;/x-foo&gt;</code> being defined by <code>platform.js</code> and <code>x-foo.html</code>.</p>
  
  <p>It seems like this is the equivalent to a directive module in AngularJS:</p>
  
  <pre><code>angular.module('xfoo', [])
  .controller('X-Foo', ['$scope',function($scope) {
      $scope.text = 'hey hey!';
  })
  .directive('x-foo', function() {
      return {
          restrict: 'EA',
          replace: true,
          controller: 'X-Foo',
          templateUrl: '/views/x-foo.html',
          link: function(scope, controller) {
          }
      };
  });
  </code></pre>
  
  <ul>
  <li><p>What is the difference between the two?</p></li>
  <li><p>What problems does Polymer solve that AngularJS has not or will not?</p></li>
  <li><p>Are there plans to tie Polymer in with AngularJS in the future?</p></li>
  </ul>