How can I dynamically add a button to the last item in a list?

Question

In Angular, I'm using the ng-repeat directive to print a list of items in an array. What I'd like to do is add a button to the right of the last item in the list. I'm not aware of a non jquery way of adding this dynamically.

Here is an image of what I currently have. My button gets pushed down the list when new things get added. I'd like to see that button on the right side of the last item in the list (here it is 'acculist').

Any ideas help! Thanks everyone.

Edit The button must be present at all times. Initially there will be no items in the Shopping List, so the user must always have the ability to click the button to add items to a shopping list.

Answer 1

<li ng-repeat="item in items track by $index">
<span>{{item.name}}</span> <button ng-if="$last" >Add To List</button>
</li>

Answer 2

<div ng-app="my_app" ng-controller="my_Ctrl">
   <ul>
      <li ng-repeat="a in items">
         <span>{{a}}</span>
         <button ng-if="$last" value="Add" ng-click="additems()">Add</button>
       </li> 
       <li ng-if="items.length===0">
          <button value="Add" ng-click="additems()">Add</button>
       </li>   
    </ul>
</div>

angular

  var app=angular.module("my_app",[]);
  app.controller("my_Ctrl",function($scope){
     $scope.items=["one","two","three"];
     $scope.additems=function(){
      $scope.items.push("New Items"+($scope.items.length+1));
     }
 })