I'm getting a console error: TypeError: Object #<HTMLInputElement> has no method 'hasClass' How can this be? I'm calling it on an html.element?

directive.js

angular.module('myApp.directives', [])
  .directive('checkboxLimit', function() {
	return {
		restrict: 'A',
		link: function(scope, ele, attrs, ctrl) {
			scope.$watch('bet.winner', function(newVal, oldVal) {
				var bets = angular.element(document.getElementsByClassName('currentBet'));
				console.log(newVal);
				if (newVal === true) {
					angular.forEach(bets, function(bet) {
					  if (bet.hasClass('toHide'))
					    bet.addClass('toHide');
					    console.log(bet);	
					});
				} else if (newVal === false) {
					angular.forEach(bets, function(bet) {
						if (!bet.hasClass('toHide')) {
							bet.addClass('toShow');
						}
					});
				}
			});
		}
	}
});

index.html

	<div ng-controller="BettingController">
	
	  <h2>Todays Bets</h2>	
	  <ul id="todayBets">
		<li ng-repeat="bet in bets | orderBy:'startTime' | orderByPriority | getCurrentBets" checkbox-limit>
			<h2>{{bet.better}}</h2>
			<span>{{bet.startTime}}</span>
			<b>{{bet.timeLength}}</b>
			<input type="checkbox" ng-model="bet.winner" ng-change="updateWinner(bet);" class="currentBet">
		</li>
	  </ul>
	 </div>