app.js

## app.js
angular.module('shipClient', ['ngTouch'])
  .controller('JobController', ['$scope', function($scope) {
    $scope.items = [];
    // call api, authenticate with api-key token and device's guid get
    // some code here to be written
    // initialize new job - call api, get next job id
    // some code here to be written

    $scope.submitJob = function() {
      // get device unique identifier
      // hash items[], device uid, refNum
      // que job in case don't get success callback from api
      // if receive success confirmation, clear que

      // initialize new job - call api, get next job id
      // some code here to be written
    };

    // User enters text into refNum field, and submits form (by pressing enter or pressing Submit button)
    // Expected bihaviour:  Enter text > submit > { hold value } ~ > disable field > set focus to itemText field in additem() form ~
    $scope.setRef = function() {
      var refNumt = $scope.refNum
      $scope.refNum = refNumt;

    };

    $scope.addItem = function() {
      $scope.items.push({text:$scope.itemText, del:false});
      $scope.itemText = '';
    };


    $scope.delete = function() {
      var tmpItems = $scope.items;
      $scope.items = [];
      angular.forEach(tmpItems, function(item) {
        if (!item.del) $scope.items.push(item);
      });
    };
  }]);

## index.html
<!doctype html>
<html ng-app="shipClient">
<head>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
    <script src="bower_components/angular/angular.min.js"></script>
    <script src="bower_components/angular-touch/angular-touch.js"></script>
    <title>mShip</title>

    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
    <!--[if lte IE 8]>
        <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/grids-responsive-old-ie-min.css">
    <![endif]-->
    <!--[if gt IE 8]><!-->
        <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/grids-responsive-min.css">
    <!--<![endif]-->
    <link rel="stylesheet" href="app.css">
    <script src="app.js"></script>
  </head>
  <body>
    <div class="pure-g">
      <div ng-controller="JobController">
        <div class="pure-u-1 pure-menu pure-menu-open pure-menu-horizontal">
          <a href="#" class="pure-menu-heading">SHIPPR</a>
          <ul>
            <li><a class="button-warning button-large pure-button" href="#">CLEAR JOB</a></li>
          </ul>
        </div>

        <form class="pure-form" ng-submit="setRef()">
          <fieldset>
            <input class="pure-input-1" type="text" ng-model="refNum" placeholder="enter sales order #" >
          </fieldset>
        </form>

        <form class="pure-form" ng-submit="addItem()">
          <fieldset>
          <input type="text" ng-model="itemText"  size="25" placeholder="enter number or scan barcode">
          <input class="btn-primary" type="submit" value="add" hidden>
          </fieldset>
        </form>

        <div ng-repeat="item in items">
          <div class="pure-u-1-5"><p><input type="checkbox" ng-model="item.del"></p></div>
          <div class="pure-u-4-5"><p><span class="del-{{item.del}}">{{item.text}}</span></p></div>
        </div>
        <div class="pure-u-1">
        <span>{{items.length}} items</span>
        [ <a href="" ng-click="delete()">delete selected</a> ]

        </div>

        <div class="pure-u-1">
          <a class="button-success button-large pure-button" href="#">SUBMIT SHIPPMENT</a>
        </div>

        <div class="pure-u-1">
          <table class="pure-table pure-table-bordered">
                  <tr>
                      <td>ITEMS {{items.length}}</td>
                      <td>STATUS (good)</td>
                      <td>JOBS IN QUEUE  0</td>
                  </tr>
          </table>
        </div>

      </div>


    </div>
  </body>
</html>
	angular.module('shipClient', ['ngTouch'])
	.controller('JobController', ['$scope', function($scope) {
	$scope.items = [];
	// call api, authenticate with api-key token and device's guid get
	// some code here to be written
	// initialize new job - call api, get next job id
	// some code here to be written

	$scope.submitJob = function() {
	// get device unique identifier
	// hash items[], device uid, refNum
	// que job in case don't get success callback from api
	// if receive success confirmation, clear que

	// initialize new job - call api, get next job id
	// some code here to be written
	};

	// User enters text into refNum field, and submits form (by pressing enter or pressing Submit button)
	// Expected bihaviour: Enter text > submit > { hold value } ~ > disable field > set focus to itemText field in additem() form ~
	$scope.setRef = function() {
	var refNumt = $scope.refNum
	$scope.refNum = refNumt;

	};

	$scope.addItem = function() {
	$scope.items.push({text:$scope.itemText, del:false});
	$scope.itemText = '';
	};



	$scope.delete = function() {
	var tmpItems = $scope.items;
	$scope.items = [];
	angular.forEach(tmpItems, function(item) {
	if (!item.del) $scope.items.push(item);
	});
	};
	}]);
	<!doctype html>
	<html ng-app="shipClient">
	<head>
	<meta charset="utf-8">
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
	<script src="bower_components/angular/angular.min.js"></script>
	<script src="bower_components/angular-touch/angular-touch.js"></script>
	<title>mShip</title>

	<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
	<!--[if lte IE 8]>
	<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/grids-responsive-old-ie-min.css">
	<![endif]-->
	<!--[if gt IE 8]><!-->
	<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/grids-responsive-min.css">
	<!--<![endif]-->
	<link rel="stylesheet" href="app.css">
	<script src="app.js"></script>
	</head>
	<body>
	<div class="pure-g">
	<div ng-controller="JobController">
	<div class="pure-u-1 pure-menu pure-menu-open pure-menu-horizontal">
	<a href="#" class="pure-menu-heading">SHIPPR</a>
	<ul>
	<li><a class="button-warning button-large pure-button" href="#">CLEAR JOB</a></li>
	</ul>
	</div>

	<form class="pure-form" ng-submit="setRef()">
	<fieldset>
	<input class="pure-input-1" type="text" ng-model="refNum" placeholder="enter sales order #" >
	</fieldset>
	</form>

	<form class="pure-form" ng-submit="addItem()">
	<fieldset>
	<input type="text" ng-model="itemText" size="25" placeholder="enter number or scan barcode">
	<input class="btn-primary" type="submit" value="add" hidden>
	</fieldset>
	</form>

	<div ng-repeat="item in items">
	<div class="pure-u-1-5"><p><input type="checkbox" ng-model="item.del"></p></div>
	<div class="pure-u-4-5"><p><span class="del-{{item.del}}">{{item.text}}</span></p></div>
	</div>
	<div class="pure-u-1">
	<span>{{items.length}} items</span>
	[ <a href="" ng-click="delete()">delete selected</a> ]

	</div>

	<div class="pure-u-1">
	<a class="button-success button-large pure-button" href="#">SUBMIT SHIPPMENT</a>
	</div>

	<div class="pure-u-1">
	<table class="pure-table pure-table-bordered">
	<tr>
	<td>ITEMS {{items.length}}</td>
	<td>STATUS (good)</td>
	<td>JOBS IN QUEUE 0</td>
	</tr>
	</table>
	</div>

	</div>


	</div>
	</body>
	</html>