Using Pug and SCSS with Angular (ng-model)

I am trying to learn Angular at the same time with Pug and SCSS, my current problem is concept related ng-class

. My code looks like this:

HTML (in Pug)

form
   input#theSearch(type='text' ng-model="theSearch")
   br
   span(ng-class ="{'test': isEven()}") Example Text

      

        
        
        
      

    

SCSS

.test {
    color:red;
    font-size:80px;
}

      

        
        
        
      

    

AngularJS

angular.module("root", [])
   .controller("index",["$scope",function($scope) {
     $scope.theSearch = 1;
     $scope.isEven = function () { return $scope.theSearch % 2 === 0; };
}]);

      

        
        
        
      

    

So, ideally this will react when the user enters an even number and turns span

red and also increases the size. It is currently unchanged despite even the input. I suspect this is some kind of rookie syntax error, but any advice on the matter would be most appreciated.

Side notes: I am in the CodePen environment. Pug enabled, SCSS enabled, Bootstrap enabled, Angular 1.6.1. All html is contained in main.container-fluid(ng-app="root")

. Thank you in advance!