The HTML:

  <div id="schedule-button-bar2" class="button-bar scheduleButtonBar">
         <button id="schedule-all" style="font-size:16px; background: transparent; color:#ff9c33" class="button button-calm "  ng-click = "updateButtons('schedule-all'); data.filter=''">All Events</button>
       <button id="schedule-Games" style=" font-size:16px;" class="button button-calm" ng-click = "updateButtons('schedule-Games'); data.filter=({type:'Game'})">Games</button>
       <button id="schedule-Practice" style="font-size:15px;" class="button button-calm" ng-click = "updateButtons('schedule-Practice'); data.filter=({type:'Practice'})" Practices</but"ton>

     </div>


The Javascript:

       indent preformatted text by 4 spaces
.controller('scheduleCtrl', ['$scope', '$stateParams',
function scheduleController ($scope, $stateParams) {
      $scope.data = {
     "filter" : "",
    "events": getEvents()
    // alert()
  };
    $scope.updateButtons = function(btn){
 document.getElementById('schedule-Practice').style = "background: opaque; "
 document.getElementById('schedule-all').style = "background: opaque; "
 document.getElementById('schedule-Games').style = "background: opaque; "
 document.getElementById(btn).style = " background: transparent ; color: #ff9c33"
    }
}])