<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<script>

function TreeController($scope) {

  //initial state
  $scope.trees = [
    {name:'Larch', category:'Conifer'},
    {name:'Doug Fir', category:'Conifer'},
    {name:'Cedar', category:'Conifer'},
    {name:'Birch', category:'Deciduous'},
    {name:'Maple', category:'Deciduous'},
    {name:'Oak', category:'Deciduous'}];

  $scope.orderByField = 'name';

  // add tree button
  $scope.add = function() {
    var newTree = {name:$scope.name, category: $scope.category};
    $scope.trees.push(newTree);

    // clear the filter so the user will see the new tree
    $scope.nameFilter = '';

    // reset the form and its validation
    $scope.name = '';
    $scope.category = '';
    $scope.form.$setPristine(true);
  };

  // changes sorting, triggered by clicking <th> tags in table
  $scope.updateOrdering = function(newOrderByField) {

    // reverse the order if the click the same column again
    if($scope.orderByField == newOrderByField) {
        $scope.orderReversed = !$scope.orderReversed;
    } else {
        $scope.orderReversed = false;
    }

    $scope.orderByField = newOrderByField;

  };

}
</script>