GitHub Issues with AngularJS

HTML

<div ng-app="myApp">
  <div ng-controller="MyCtrl1">

    <h1 class="lead">AngularJS GitHub Issues</h1>

    <div class="well" ng-show="myData.currentIssue == null">
      <form class="form-search pull-right">
        <div class="input-append">
          <input type="text" ng-model="filterText" class="span2 search-query" placeholder="Filter current page">
          <button ng-click="filterText = null" class="btn">Clear Filter</button>
        </div>
      </form>
      <label>Issue State</label>
      <select ng-model="myData.issueListState" ng-change="setIssueList()">
        <option value="open">Open</option>
        <option value="closed">Closed</option>
      </select>
      <table class="table table-striped table-bordered">
        <thead>
          <tr>
            <th class="span1">Number</th>
            <th class="span2 sortable" ng-class="sortClass('created')" ng-click="setSort('created')">Created</th>
            <th class="span2 sortable" ng-class="sortClass('updated')" ng-click="setSort('updated')">Updated</th>
            <th class="span1 sortable" ng-class="sortClass('comments')" ng-click="setSort('comments')">Comments</th>
            <th class="span1">State</th>
            <th class="span2">Reporter</th>
            <th>Title</th>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="issue in myData.issueList | filter:filterText">
            <td class="text-center"><a ng-click="setCurrentIssue(issue.number)">{{issue.number}}</a>

            </td>
            <td class="text-center">{{issue.created_at | date:'short'}}</td>
            <td class="text-center">{{issue.updated_at | date:'short'}}</td>
            <td class="text-center">{{issue.comments}}</td>
            <td class="text-center" ng-class="issue.state">{{issue.state}}</td>
            <td class="text-center">{{issue.user.login}}</td>
            <td>{{issue.title}}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="well"...

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http: //goo.gl/BUfGZ --> <script src="http://code.angularjs.org/1.0.7/angular.min.js"></script> <script src="http://code.angularjs.org/1.0.7/angular-resource.min.js"></script> <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"> <style> a {
cursor: pointer;

}
thead {
  cursor: pointer;
}
th.sortable {
  color: #0088cc;
}
td {
  padding: 0.2em 1em;
}
td.open {
  color: darkgreen;
}
td.closed {
  color: maroon;
}
.sort-desc {
  background: no-repeat right center url(data:image/gif;
 base64, R0lGODlhCgAKALMAAHFxcYKCgp2dnaampq+vr83NzeHh4f...

JavaScript

angular.module('myApp', ['ngResource']).
factory('AngularIssues', function($resource) {
  return $resource('https://api.github.com/repos/angular/angular.js/issues/:number', {
    number: '@number'
  }, {
    getIssue: {
      method: 'GET',
      params: {
        number: 0
      }
    }
  })
}).
controller('MyCtrl1', ['$scope', 'AngularIssues', function(scope, AI) {
  scope.myData = {
    currentIssue: null,
    issueList: [],
    issueListState: 'open',
    issueListSort: 'created',
    issueListDirection: 'desc',
    issueListPage: 1
  };

  scope.setIssueList = function() {
    AI.query({
      state: scope.myData.issueListState,
      //labels: scope.myData.labels,
      sort: scope.myData.issueListSort,
      direction: scope.myData.issueListDirection
    }, function(data) {
      scope.myData.issueList = data;
    });
  };

  scope.setSort = function(sort) {
    var oldSort = angular.copy(scope.myData.issueListSort);
    scope.myData.issueListSort = sort;
    if (oldSort == sort) {
      scope.setDirection(scope.myData.issueListDirection == 'desc' ? 'asc' : 'desc');
    } else {
      scope.setDirection('desc');
    }
  };

  scope.setDirection = function(direction) {
    scope.myData.issueListDirection = direction;
    scope.setIssueList();
  };

  scope.sortClass = function(column) {
    return column == scope.myData.issueListSort && 'sort-' + scope.myData.issueListDirection;
  };

  scope.setCurrentIssue = function(number) {
    AI.getIssue({
      number: number
    }, function(data) {
      scope.myData.currentIssue = data;
    });
  };

  scope.showAll = function() {
    scope.myData.currentIssue = null;
  };

  scope.setIssueList();
}]);