AngularJS Add and remove items

AngularJS empty fiddle with myApp

HTML

<div ng-app="myApp">
    <form ng-submit="submit()" ng-controller="Ctrl">
        Queue:
        <ul ng-repeat='item in retryQueue'>
            <li>{{item.reason}}
                <button ng-click='deleteQueueItem(item)'>delete</button>
            </li>
        </ul>
        
        Reason:
        <input type='text' ng-model='queue.reason' autofocus ></input>
        <button ng-click='pushReason(queue.reason)' autofocus >add</button>
        <p>
        </p>
        <p>Que has more items: {{hasMore()}}</p>
        <p>First Reason: {{retryReason()}}</p>
    </form>
</div>

JavaScript

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

//app.directive('myDirective', function() {});
//app.factory('myService', function() {});

app.controller('Ctrl', ['$scope', function ($scope) {

    $scope.retryQueue = [];
    $scope.hasMore = function () {
        return $scope.retryQueue.length > 0;
    }


    $scope.retryReason = function () {
        return $scope.hasMore() ? $scope.retryQueue[0].reason : "queue is empty";
    }

    $scope.pushReason = function (reason) {
        $scope.retryQueue.push({
            reason: reason
        })
        $scope.queue.reason = "";
    }

    $scope.deleteQueueItem = function (item) {
        var index = $scope.retryQueue.indexOf(item);
        if (index > -1) {
            $scope.retryQueue.splice(index, 1);
        }
    }


}]);