Why are the Ember component(s) for my notifications not being read/rendered?

I've been stumped on this issue all day and have exhausted all possible reasons I can think of. The problem is that my handlebar to display a notification if the user has one is not displaying.

As it is early on, I'm just testing it out by when I click 'Sign in' button, it sends a notification to the user (me in this case) just so I can see it working.

To put it simply...it doesn't work. I've attached an image showing the final result on a webpage, and it seems to comment out the handlebar line, and ignore it. And I've not a clue why.

I know the data is being read, as the other classes/componenets (the .js files, and other files) are able to return the data in the console. My 'main-header' components and 'main-footer' components renders/reads fine across all pages.

I'm also using a near-enough exact copy of another website's code that uses this. And it works perfectly. Originally I made some changes but earlier I copy-pasted everything I thought relevant, and it still didn't work.

Here is the HTML for the index.hbs (the homepage/page shown in the screenshot)

<div>

    {{main-header}}
    {{notification-list notifications=index.currentNotifications closeNotification='closeNotification'}}z

</div>

<!--Navbar - Home, About and Contact. Fixed position follows user down page-->
<header id="header" role="banner">
  <!-- Navigation -->
</header>

<!--Main Body-->
<div class="container">
  <br>
  <br><br><br><br><br><br><br>
  <button class="btn btn-primary btn-block btn-center" type="submit" {{action 'login'}}>
    Sign In
    &nbsp;
  </button>


  <!--Footer containing copyright, logos and social media-->
{{main-footer}}
</div>

The Homepage's .js file;

App.IndexRoute = Ember.Route.extend({

    model: function() {

    }
});

App.IndexView = Ember.View.extend({
    templateName: 'index'
});

App.IndexController = Ember.Controller.extend({

    needs: ['application'],
    currentNotifications: Ember.computed.alias("controllers.application.currentNotifications"),

    actions: {
        login: function() {
            console.log(this.currentNotifications);
            this.send( 'pushNotification', 'Message Sent', false );
        }
    }
});

The notification-list.hbs file (Btw, the original was made using '{{#each x in y}}' and I had to change that due to deprecation, but ultimately it should work the same I believe;

 <div class="container notify">
  <div class="row">
      {{#each notifications as notification}}
          {{#if notification.error}}
            <div class="alert alert-danger">
              <button type="button" class="close" data-dismiss="alert" aria-hidden="true"
                  {{action 'closeAlert' notification}}>
                ×
              </button>
              <span class="glyphicon glyphicon-hand-right"></span> <strong>{{notification.title}}</strong>
              <hr class="message-inner-separator">
                {{#each notification.message as message}}
                  <p>
                    <b>{{message.field}}</b>{{#if message.value}}: {{message.value}}{{/if}}
                  </p>
                {{/each}}
            </div>
          {{else}}
            <div class="alert alert-info">
              <button type="button" class="close" data-dismiss="alert" aria-hidden="true"
                  {{action 'closeAlert' notification}}>
                ×
              </button>
              <span class="glyphicon glyphicon-ok"></span> <strong>{{notification.title}}</strong>
              <hr class="message-inner-separator">
              <p>{{format-text notification.message}}</p>
            </div>
          {{/if}}
      {{/each}}
  </div>
</div>

And the associated notificationlist's .js file;

App.NotificationListComponent = Ember.Component.extend( {
    notifications: [],

    lastLength: 0,

    didInsertElement: function(){
        if(this.notifications != null){
            this.notifications.forEach(function(notification){
                Ember.run.later( this, function () {
                    if ( this.notifications.indexOf( notification ) >= 0 ) {
                        this.send( 'closeAlert', notification );
                    }
                }, 3000 );
            }, this)
        }
    },

    ////DO NOT REFERENCE IN HANDLEBARS
    timeout: function() {
        var lastLength = this.get( 'lastLength' );
        var notifications = this.get( 'notifications' );

        //check it was an added notification, not a destroyed one
        if ( notifications.length >= lastLength ) {
            var index = notifications.length - 1;

            if ( index >= 0 ) {
                var notification = notifications[ index ];
                Ember.run.later( this, function () {
                    if ( notifications.indexOf( notification ) >= 0 ) {
                        this.send( 'closeAlert', notification );
                    }
                }, 3000 );
            }
        }
        //update last length
        this.set('lastLength', notifications.length);
    }.observes('notifications.length'),

    actions: {
        closeAlert: function( notification ){
            this.sendAction('closeNotification', notification);
        }
    }

});

Finally the app.js file. I've left some parts off that I don't think is relevant (such as the Adapter and store etc) if its needed lemme know though, but its pretty much the standard/default ones;

App.ApplicationController = Ember.Controller.extend({

    currentNotifications: [],

    notification: Ember.Object.extend( {
        title: null,
        message: null,
        error: false
    } ),

    //Don't Call Directly, Use Route.Send to activate
    pushNotification: function( message, error ) {
        var currentNotifications = this.get( 'currentNotifications' );
        var notification = new this.notification;
        var test = error ? 'Failure' : 'Success';

        notification.setProperties( {
            title: test,
            message: message,
            error: error
        } );

        //Remove old message
        if(currentNotifications.length >= 4) {
            this.send('closeNotification', currentNotifications[0]);
        }

        currentNotifications.pushObject( notification );
    },

    closeNotification: function( notification ){
        var currentNotifications = this.get( 'currentNotifications' );
        var index = currentNotifications.indexOf(notification);
        //remove notification
        currentNotifications.removeAt(index);
    },

    updateCurrentPath: function() {
        App.set('currentPath', this.get('currentPath'));
    }.observes('currentPath')
});

The image showing the result of the above code. The highlighted line () is the line where the notification-list component is supposed to be