Change the title of website (controlled through angular router and ui router) being displayed in google search

I am currently building out an angular 1.5 website through ui router where the title on the webpage changes with a controller depending on what page a user is on. The HTML looks like this

<title ng-controller="pageTitle">Red Vase | {{ page }}</title>

and the controller code is this

 angular.module('redvase')
  .controller('pageTitle', function($scope, $state, $rootScope) {
      $rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams) {
        $scope.current = toState.name;
        if ($scope.current === "home") {
          $scope.page = "Home"
        } else if ($scope.current === "inspire") {
          $scope.page = "Inspire Others"
        } else if ($scope.current === "inspireShop") {
          $scope.page = "Inspired Living Store"
        } else if ($scope.current === "blog") {
          $scope.page = "Blog"
        } else if ($scope.current === "contactus") {
          $scope.page = "Contact Us"
        } else {
          $scope.page = "Home"
        }
    })
  })

When searching for the website in Chrome, the autofill history comes up as "myredvase.com - Red Vase | {{ page }}" instead of "myredvase.com - Red Vase | Home".

Can anyone suggest away to make Chrome display "myredvase.com - Red Vase | Home" despite the title tag containing the {{ page }} expression? I have been scratching my head on this one.

Thank you!