Angular responsive images test

// NOTE: ng-app="plunker" + AngularUI module dependency
var app = angular.module('plunker', ['ngResImg']);

app.controller('MainCtrl', function($scope) {
  
});

<!doctype html>
<html ng-app="plunker" >
<head>
  <meta charset="utf-8">
  <title>AngularJS Plunker</title>
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css">
  <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular-resource.min.js"></script>
  <script src="angular-responsive-images.js"></script>
  <script src="app.js"></script>
  
</head>
<body ng-controller="MainCtrl">
  Hello {{name}}!
</body>
</html>

/* Put your css in here */

/*! angular-res-img 2013-06-03 */
(function(){

var app = angular.module('ngResImg', []);

// Default queries (stolen from Zurb Foundation)
app.value('defaultQueries', {
  'default':   'only screen and (min-width: 1px)',
  'small':     'only screen and (min-width: 768px)',
  'medium':    'only screen and (min-width: 1280px)',
  'large':     'only screen and (min-width: 1440px)',
  'landscape': 'only screen and (orientation: landscape)',
  'portrait':  'only screen and (orientation: portrait)',
  'retina':    'only screen and (-webkit-min-device-pixel-ratio: 2), ' +
               'only screen and (min--moz-device-pixel-ratio: 2), ' +
               'only screen and (-o-min-device-pixel-ratio: 2/1), ' +
               'only screen and (min-device-pixel-ratio: 2), ' +
               'only screen and (min-resolution: 192dpi), ' +
               'only screen and (min-resolution: 2dppx)'
});

app.directive('ngSrcResponsive', ['defaultQueries', function(defaultQueries) {
  // console.log('WELL HI!');

  return {
    restrict: 'A',
    scope: {
      src: '@'
      // resSrc: '@ngSrcResponsive'
    },
    link: function(scope, elm, attrs) {
      // Double-check that the matchMedia function matchMedia exists
      if (typeof(matchMedia) !== 'function') {
        throw "Function 'matchMedia' does not exist";
      }

      // console.log('Hi there!');

      // var mqs = [];

      // Query that gets run on link, whenever the directive attr changes, and whenever 
      function updateFromQuery(querySets) {
        // Destroy registered listeners, we will re-register them below
        // angular.forEach(listenerDeregs, function(dereg) {
          
        // });

        var lastTrueQuery;

        for (var query in querySets) {
          if (querySets.hasOwnProperty(query)) {
            if (defaultQueries.hasOwnProperty(query)) {
              query = defaultQueries[query];
            }

            var mq = matchMedia(query);
            dump(query);

            if (mq.matches) {
              lastTrueQuery = query;
            }

            // Add a listener for when this query matches
            // mq.addListener(function() {
            //   setSrc(src);
            // });
          }
        }

        if (lastTrueQuery) {
          setSrc( querySets[lastTrueQuery] );
        }
      }

      function setSrc(src) {
        elm.attr('src', src);
      }

      attrs.$observe('ngSrcResponsive', function(value) {
        var querySets = scope.$eval(value);
        updateFromQuery(querySets);
      });
    }
  };
}]);

})();