How can I pass a $scope variable as part of component's templateUrl in angularJs 1.5?

Question

I have the following code:

var myModule = angular.module('myModule', []);

myModule.controller('newController', ['$scope', function($scope) {
                   $scope.id = '1234';
}])
.component('myModalX', {
         templateUrl: `./partials/locationY?id=${$scope.id}`,
         controller: 'newController',
         controllerAs: 'vm'
});

This doesn't work. How can I ensure that I can pass $scope.id as part of the templateUrl?

Answer 1

Update: I figured out how to do it. I created a service that has a setter method that accepts the scope I need as a parameter, and a getter method that accesses the set variable in the service.

This way I'm able to access the variable in scope using the getter method in the service.

myModule.controller('newController', ['$scope', 'myScopeAcessingService', function($scope, myScopeAcessingService) {
                   $scope.id = '1234';
                   myScopeAcessingService.setValue($scope);

}])
.component('myModalX', {
         templateUrl: function(myScopeAcessingService) {

           const theIdIneed = myScopeAcessingService.getValue();

           return `./partials/locationY?id=${theIdIneed}`
         },
         controller: 'newController',
         controllerAs: 'vm'
});