AngularJs doesn't render data changed on service

Question

I have a service MediaService and i change its data inside a component. MediaService data are bind to another component, and when i change data from first component it doesn't render on second component HTML.

MediaService

angular
.module('commons')
.service('MediaService', function () {

    this.selectedMedia = {}
    this.isPlaying = false

    return this;

})

This is where i change data

readerMedias

angular
.module("app")
.component("readerMedias", {
    bindings: {
        medias: "="
    },
    templateUrl: "app/reader/components/reader-medias/reader-medias.html",
    controller: function (MediaService) {
        MediaService.selectedMedia.url = "test" // i use a real url
        MediaService.selectedMedia.type = "video" 
        MediaService.isPlaying = true
    }
})

This is the component where i want the changes, and as i can debug data are reflected here and it is ok, but not in component HTML

readerPlayer

angular
.module('app')
.component('readerPlayer', {
    templateUrl: 'app/reader/components/reader-player/reader-player.html',
    controllerAs: '$ctrl',
    controller: function (MediaService, $scope){
        $scope.MediaService = MediaService
        console.log(MediaService)
        return this;
    }
})

readerPlayer HTML

div.playing-media(
    ng-draggable
    ng-init="$ctrl.isFull = true"
    ng-class="{\
        'full-media': $ctrl.isFull, \
        'min-media': !$ctrl.isFull \
    }"
    ng-if="MediaService.isPlaying"
)
    div.playing-head
        div
            span.material-icons.full(
                ng-click="$ctrl.isFull = !$ctrl.isFull"
            ) photo_size_select_large
        span.material-icons.close(
            ng-click="MediaService.isPlaying = false"
        ) clear

    div.content
        video(
            controls
            ng-if="MediaService.selectedMedia.type != audio"
        )
            source(
                ng-src="{{MediaService.selectedMedia.url}}"
                type="video/mp4"
            )

        audio(
            ng-if="MediaService.selectedMedia.type == audio"
        )
            source(
                ng-src="{{MediaService.selectedMedia.url}}"
                type="audio/mp3"
            )

Answer 1

Delete the return statement in the service:

angular
.module('commons')
.service('MediaService', function () {

    this.selectedMedia = {}
    this.isPlaying = false

    //DELETE the return statement    
    ̶r̶e̶t̶u̶r̶n̶

    //OR

    return this;    
})

Without a return statement, the constructor automatically returns the this object created by the new operator.

---

The string needs quotes:

div.content
    video(
        controls
        ng-if="MediaService.selectedMedia.type !=  ̶a̶u̶d̶i̶o̶  ͟'͟a͟u͟d͟i͟o͟'͟ "
    )
        source(
            ng-src="{{MediaService.selectedMedia.url}}"
            type="video/mp4"
        )

    audio(
        ng-if="MediaService.selectedMedia.type ==   ̶a̶u̶d̶i̶o̶  ͟'͟a͟u͟d͟i͟o͟'͟ "
    )
        source(
            ng-src="{{MediaService.selectedMedia.url}}"
            type="audio/mp3"
        )

Without quotes the media type is being compared to $scope.audio which is undefined.