In my angularjs app written with typescript, I am trying to add an asterisk to a certain field in the html using ng-if

<td class="abc" >                    
    <span ng-if="vm.showStar == true && vm.Id == myItem.Id">{{myitem.myValue}}*</span>
    <span ng-if="vm.showStar != true">{{myitem.myValue}}</span>
  </span>
</td>

In the ts file, I have what is i guess a javascript function to which i am passing the rootscope in order to capture the event emitted from elsewhere.

function myCtrlr(

  $rootScope,

  ...
  $rootScope.$on('myEvent', function(event,data) {
    debugger;
    console.log(event);
    vm.showStar = true;    
});

The event is captured successfuly

In the ts file, There is also an interface which contains variables. The interface and javascript function are linked using a line like this:

export default angular.module('myapp.controller.hourlyCheck', requires)
  .controller('MyCheckCtrl', myCtrlr)
  .name;

But when the event comes in it is not updating the variable showStar in the html. How can I get it to update?