title: "Angular" way of responsive templates? Does matchMedia go in the 'controller'?
body: <p>This is what I'm doing now:<br>
  <a href="http://jsbin.com/EDovILI/1/edit" rel="nofollow">http://jsbin.com/EDovILI/1/edit</a>  </p>
  
  <p>Basically sticking an event-listener into the controller. Doesn't feel like the right way to do it, but not sure how this can be abstracted out</p>
  
  <p>The template:  </p>
  
  <pre><code>&lt;div ng-app="app" ng-controller="appController"&gt;
      &lt;div ng-if="layout == 'big'&gt;...&lt;/div&gt;
      &lt;div ng-if="layout == 'small'&gt;...&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The JavaScript:</p>
  
  <pre><code>function gitReposController($scope, github){
      //...
          var widthQuery = window.matchMedia("(min-width: 44.375em)");
          var setSizeAppropriateTemplate = function (mql) {
              if (mql.matches) {
                  $scope.layout = 'big';
              } else {
                  $scope.layout = 'small';
              }
              if(!$scope.$$phase) { //prevents it from unnecessarily calling $scope.$apply when the page first runs
                  $scope.$apply();
              }
          };
          widthQuery.addListener(setSizeAppropriateTemplate);
          setSizeAppropriateTemplate(widthQuery);
      //...
  }
  </code></pre>
  
  <p>edit/addendum:  </p>
  
  <p>Is it bad form to create an event listener in the controller? Should it be a Directive instead? Or maybe a Behavior?</p>
  
  <p><strong>edit</strong>: modified it into a directive and think it makes more sense now. Could probably be better though.<br>
  <a href="http://jsbin.com/EDovILI/4/edit" rel="nofollow">http://jsbin.com/EDovILI/4/edit</a>  </p>
  
  <p>The template:  </p>
  
  <pre><code>&lt;div ng-app="gitRepos" ng-controller="gitReposController" breakpoint="min-width: 44.375em"&gt;
      &lt;div ng-if="matches"&gt;...&lt;/div&gt;
      &lt;div ng-if="!matches'&gt;...&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The JavaScript</p>
  
  <pre><code>app.directive("breakpoint", function () {
      return function (scope, element, attrs) {
          var breakpoint = attrs.breakpoint;
          var mql = window.matchMedia( "(" + breakpoint + ")" );
          var mqlHandler = function (mql) {
              scope.matches = mql.matches;
              if(!scope.$$phase) { //prevents it from unnecessarily calling $scope.$apply when the page first runs
                  scope.$apply();
              }
          };
          mql.addListener(mqlHandler);
          mqlHandler(mql);
      };
  });
  </code></pre>