localStorage add when I refresh the page

I'm doing the following operation:

I get the typed text in a <textarea> and I make a push() to add it in the array; shortly afterwards saved in localStorage . I retrieve the values, I make a split() the via AngularJS add in <ul> .

So far so good, but when I refresh the page the data goes away. The function starts adding values to the initial position of the array because it is empty.

What am I doing wrong?

JS

(function  () {
    'use strict';

    var statusList = [];

    angular.module('appStatus'[])
      .controller('CreateNewStatusController', 
        function CreateNewStatusController($scope) {

        $scope.saveStatus = function () {
            statusList.push(document.getElementById('status_text').value);

            localStorage.setItem('dbStatus', statusList);

            console.log(statusList);

        }

    });

    angular.module('listAllStatus', [])
       .controller('ListStatusController', 
        function ListStatusController ($scope) {

            $scope.status = localStorage.getItem('dbStatus').split(',');
            console.log(localStorage.getItem('dbStatus'));
    });
}());

HTML

<div class="content" style="margin-top: 60px;">
    <ul ng-controller="ListStatusController">
        <li ng-repeat="s in status">
            {{ s }}
        </li>
    </ul>
  </div>