localStorage some when I refresh the page

Question

I’m doing the following operation:

I get the typed text in a <textarea> and make a push() to add it to the array; then saved to localStorage. I get my values back, I make one split() the way Angularjs add in <ul>.

So far so good, but when I update the page the data disappears. The function starts adding the values at the initial position of the array because it is empty.

What I’m 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>