title: Using Zurb Foundation Interchange with AngularJS
body: <p>I'm working on an AngularJS project that uses Zurb Foundation as its CSS framework. I'm trying to figure out how to using Foundation's <a href="http://foundation.zurb.com/docs/components/interchange.html">data interchange</a> within the context of an AngularJS view. Is this even possible, I can't seem to get it to work. This is what I currently have:</p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app='app' xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;title&gt;Test&lt;/title&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  
      &lt;link rel="stylesheet" href="foundation/normalize.css" /&gt;
      &lt;link rel="stylesheet" href="foundation/foundation.min.css" /&gt;
      &lt;link rel="stylesheet" href="app.css" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="view" ng-view&gt;&lt;/div&gt;
  
      &lt;script type="text/javascript" src="jquery/2.0.3/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="foundation/foundation.min.js"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript" src="angularjs/1.2.7/angular.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="angularjs/1.2.7/angular-route.min.js"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript" src="app.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>angular.module('app', ['ngRoute'])
    .config(function ($routeProvider, $locationProvider) {
      $locationProvider.html5Mode(true);
  
      $routeProvider
        .otherwise({ templateUrl: '/views/interchange.html', controller: myCtrl });
      })
      .run(function ($rootScope, $location) {
        $rootScope.$on('$viewContentLoaded', function () {
          $(document).foundation();
        });
      })
  ;
  
  function myCtrl() {
      console.log('loading controller');
  }
  </code></pre>
  
  <p><strong>interchange.html</strong></p>
  
  <pre><code>&lt;article&gt;
      testing interchange
      &lt;div data-interchange="[phone.html, (small)], [portrait.html, (medium)], [landscape.html, (large)]"&gt;&lt;/div&gt;
  &lt;/article&gt;
  </code></pre>
  
  <p>When I load my app, I can see 'testing interchange'. However, the content (phone.html, portrait.html, landscape.html) based on the size of the screen is not shown. Phone.html, Portrait.html, and landscape.html just have text inside DIV elements that say 'Phone', 'Portrait', and 'Landscape' effectively.</p>
  
  <p>Is there a way to leverage Foundation's data interchange stuff inside of a AngularJS ng-view? If so, how? Thank you</p>