Bug with angular on ipad app

Question

I have a very basic cart application which works greats except for one view on mobile device. Both safari and chrome fails loading the cart. I have no idea what's going on mobile. I'm using the ratchet framework for styling but I doubt this is related since the other views load fine.

Here is what my controller looks like. I pasted it all since I have no idea what could be causing this issue.

@angular.module("app").controller("OrderNewController", ["$scope", "apiService", ($scope, apiService) ->
  $scope.title = "New Order"
  $scope.formData = {}
  $scope.totalPrice = 0
  $scope.products = []
  $scope.user = {}

  $scope.getCartItems = () ->
    apiService.getCartItems().success( (data) ->
      $scope.formData.items = data
      $scope.updateTotalPrice()
    ).error ( (status) ->
      console.log 'an error occured fetching cart';
    )

 $scope.removeCartItem = (variantId) ->
   apiService.removeCartItem(variantId).success( (data) ->
     break for item, i in $scope.formData.items when item.variantId is variantId
     $scope.formData.items.splice i, 1
     $scope.updateTotalPrice()
  ).error( (status) ->
    console.log 'an error occured remove order item'
  )

 $scope.clearCartItems = ->
  apiService.clearCartItems().success( (data) ->
    $scope.formData.items = [];
    $scope.updateTotalPrice()
  ).error( (status) ->
    console.log 'an error occured clear orders'
  )

$scope.updateCartItem = (item) ->
  apiService.updateCartItem(item).success( (data) ->
    $scope.updateTotalPrice()
  ).error( (status) ->
    console.log 'an error occured update orders'
  )

$scope.changeQuantity = (productId, quantity) ->
  newItem = true
  angular.forEach $scope.formData.items, (value, index) ->
    if value.product_id is productId

      #remove if quantity 0 or null
      if quantity is 0 or quantity is null
      $scope.formData.items.splice index, 1
    else
      $scope.formData.items[index].quantity = quantity
    newItem = false
  return

  if newItem
    $scope.formData.items.push
      product_id: productId
      quantity: quantity

$scope.updateTotalPrice = ->
  totalPrice = 0
  angular.forEach( $scope.formData.items, (value, key) ->
    totalPrice += value.price * value.quantity
  )
  $scope.totalPrice = totalPrice

$scope.processForm = ->
  $scope.formData.user = $scope.user
  $scope.formData.totalPrice = $scope.totalPrice
  apiService.submitOrder($scope.formData).success( (data) ->
    $scope.formData.items = []
    $scope.user = {}
    $scope.totalPrice = 0
    $scope.updateTotalPrice()
  ).error( (status) ->
    console.log 'an error occured when saving order'
  )

$scope.increaseCount = (item) ->
  item.quantity++;
  $scope.updateCartItem item

$scope.decreaseCount = (item) ->
  if item.quantity >= 1
    item.quantity--
    $scope.updateCartItem item

$scope.getCartItems()

])

and my view

<ul class="table-view">
    <li class="table-view-cell table-view-divider">
  {{ formData.items.length}} products | Total Price: {{totalPrice | currency}}
  <button class="btn btn-negative pull-right" type="button" ng-click="clearCartItems()" ng-disabled="formData.items.length === 0">Clear Cart</button>
</li>

<form ng-submit="processForm()" class="input-group">
  <div class="input-row">
    <label>Customer</label>
    <input type="text" ng-model="user.customer_name" placeholder="ABC" required>
  </div>
  <div class="input-row">
    <label>Email</label>
    <input type="email" ng-model="user.customer_email" placeholder="email@email.com"required>
  </div>
  <div class="input-row">
    <label>Phone</label>
    <input type="tel" ng-model="user.customer_phone" placeholder="613 890 7888">
  </div>
  <div class="input-row">
    <label>Delivery Date</label>
    <input type="date" ng-model="user.delivery_date" placeholder="01/01/2020">
  </div>
  <br>

  <li ng-repeat="item in formData.items" class="table-view-cell">
    <span style="display:inline-block; width:50%;">
      {{item.productName}} <!-- (variant: {{item.variantId}}) -->
    </span>
    <span style="display:inline-block; width:25%;">
      <button class="btn btn-outlined" ng-click="decreaseCount(item)" type="button">-</button>
      <input type="number" value="{{item.quantity}}" style="width:80px;" min="1" />
      <button class="btn btn-outlined" ng-click="increaseCount(item)" type="button">+</button>
    </span>
    <span style="display:inline-block; width:20%;">{{item.price * item.quantity | currency}}</span>
    <button class="btn btn-negative btn-outlined pull-right" type="button" ng-click="removeCartItem(item.variantId)">Remove Item</button>
  </li>

      <button type="submit" style="margin-top:20px;" class="btn btn-primary btn-block" value="Submit Order" ng-disabled="formData.items.length === 0">Submit order</button>
  </form>