Nested Directives not showing. AngularJS

I am creating a menu, where depending on the view, it will display the correct links. So from the code below, when the parent scope startCtrl, $scope.viewActions value changes it will be used to select the correct menu template, which will be display on the menu sidebar.

The issue, I'm having is that my nested directives template isn't been shown on the mobile-side-bar directive. Further I'm getting a:

Error: [$parse:syntax] Syntax Error: Token '{' invalid key at column 2 of the expression [{{playerSearchSpinnerOn}}] starting at [{playerSearchSpinnerOn}}]

when trying to bind this scope.playerSearchSpinnerOn, which is a child scope to 'startCtrl' to my

  <advertise-game playersearchspinneron={{playerSearchSpinnerOn}}></advertise-game>

Scope Hierarchy:

StartCtrl( root controller)

• (mobile-side-bar directive) (directive - isoloated scope)

• AddUsersController(controller) (display view through ng-view

Then nested directives of mobile-side-bar directive

Code

StartCtrl

  monopolyMenuModule.controller('StartCtrl', ['$scope', 'startMenuServices','startMenuHeaderBar', function ($scope, services,startMenuHeaderBar,viewNamesEnum) {
    $scope.viewActions = "";

 }]);

AddUsersCtrl

monopolyMenuModule.controller('AddUsersCtrl', ['$scope', 'addUserServices', 'GameGroupDetails', 'viewNamesEnum', function ($scope, service, GameGroupDetails, viewNamesEnum) {

     // add code to call notifyUsers object.. watch pluralsight "connecting our server to client" and "how signalr works"
     $scope.playerSearchSpinnerOn = false;

     $scope.$parent.viewActions = "addUsers.html";
}]);

MobileSideBar directive

monopolyMenuModule.directive('mobileSideBar', function () {
    return {
        restrict: "E",
        transclude: true,
        scope: {

        },
        controller: function ($scope, menuService) {
            // code here
        },
        templateUrl: '/Js/MonopolyMenu/mobileSideBar.html'
    }
});

advertise-game directive

monopolyMenuModule.directive('advertiseGame', ['GameGroupDetails', function (GameGroupDetails) {
    return {
        restrict: "E",
        scope: {
            playerSearchSpinnerOn: "=",
        },
        template: "<div ng-click='advertiseGame()>Advertise Game</div>",
        controller: function ($scope) {
            $scope.advertiseGame = function () {
                if (GameGroupDetails != null) {
                    service.FindUsers(GameGroupDetails).done(function () {
                        // add spinner once group has been show in invite screen
                        // apply is needed and apply is only called in angularjs directives
                        $scope.$apply(function () {
                            $scope.playersearchspinneron = true;
                        });

                    });
                }
            };
        }
    }
}]);

Html

<div id="mainContainer" ng-controller="StartCtrl">

<div id="menuContainer">
    <mobile-side-bar id="menu" class="hideElement">
        <div ng-include src="viewActions"></div>
    </mobile-side-bar>

</div>

// AddUsers.html comes from $routeProvider and binding addUsersCtrl 
<div ng-view class="view-animate"></div>  

</div>


<script type="text/ng-template" id="addUsers.html">
  <advertise-game player-search-spinner-on="playerSearchSpinnerOn">  </advertise-game>
  <invite-friend></invite-friend>
  <player-search></player-search>
</script>

How do I get advertise-game, and my other nested directive to show their template inside the mobile-side-bar directive?