Data Binding in AngularJS and .NetCore

Question

I've recently been assigned a task on a AngularJS .NetCore app in my company. I also have almost zero experience with AngularJS (especially with .NetCore) Also, it uses a MVVM architecture.

Here is the task: Add a field to a screen and if there is a value enter, perform the operation with that value (instead of a value received from the DB)

Adding the field was easy, but getting the data to get pulled into the controller seems to be stopping me. (if that's what's happening)

Here is the code for the screen:

<div class="text-center">
    <h4>{{ vm.title }}</h4>
</div>

<!--Before Form-->
<form class="form-horizontal" role="form" ng-submit="vm.startConsumeCase()">

    <div class="form-group form-group-sm">
        <label for="lpn" class="col-sm-5 col-xs-5 control-label text-right">LPN:</label>
        <div class="col-sm-7 col-xs-7">
            <input id="lpn" type="text" class="form-control" placeholder="Enter LPN" maxlength="30" required
                   ng-model="vm.request.case" data-fox-capitalize data-fox-next data-fox-focus data-fox-focus-on="vm.focusCase" />
        </div>
    </div>
<!-- I added this field and label -->
    <div class="form-group form-group-sm">
        <label for="numToConsume" class="col-sm-5 col-xs-5 control-label text-right">Units to Consume:</label>
        <div class=" col-sm-7 col-xs-7">
            <input id="numToConsume" type="number" class="form-control" placeholder="Optional" maxlength="5"
                   ng-model="vm.request.packages" data-fox-next />
        </div>
    </div>

    <div class="form-group form-group-sm">
        <div class="text-center">
            <div class="btn-group">
                <button type="button" class="btn btn-warning" ng-disabled="vm.working" ng-click="vm.goBack()">Back</button>
                <button class="btn btn-primary" type="submit" ng-disabled="vm.working">Consume</button>
            </div>

        </div>
    </div>

</form>
<!--End Form-->

Next I'll share the controller code.

/* 
    This controller is the view model for consumeCase.html
*/
(function () {
    'use strict';

    angular
        .module('app.miscellaneous')
        .controller('ConsumeCaseController', ConsumeCaseController);

    ConsumeCaseController.$inject = ['loggerSvc', 'miscellaneousSvc'];

    function ConsumeCaseController(loggerSvc, miscellaneiousSvc) {
        /*
          Initialize the controller
        */
        function init() {
            loggerSvc.log('Activated Consume LPN Controller');
        }

        /*
          Validates the entered case before attempting to consume the case
        */
        function startConsumeCase() {
            isWorking(true);

            return miscellaneiousSvc.getCaseInfoForAdjustment(vm.request)
                                    .then(success)
                                    .catch(clearView)
                                    .finally(isWorking(false));
           
            function success(data) {
                /* Create the consume request */
     
                /* Here is where I added the if statement to check if there
                   was a field entered. If yes, then use that value in the 
                   request variable.
                */


                if (vm.request.packages == true) {
                    var request = {
                        case: data.case,
                        caseDetailLine: data.caseDetailLine,
                        consumedPackages: vm.request.packages,
                        consumedUnits: data.units
                    }
                }
                else {
                    var request = {
                        case: data.case,
                        caseDetailLine: data.caseDetailLine,
                        consumedPackages: data.packages,
                        consumedUnits: data.units
                    };
                }

                consumeCase(request);
            }
        }

        /*
          Consume the case
        */
        function consumeCase(request) {
            isWorking(true);

            return miscellaneiousSvc.consumeCase(request)
                                    .finally(always);

            function always() {
                isWorking(false);
                clearView();
            }
        }

        /*
          Set the "working" variable of the vm to indicate if a process is running or not
        */
        function isWorking(value) {
            vm.working = value;
        }

        /*
          Clear the view model to it's default values
        */
        function clearView() {
            vm.request.case = null;
            vm.request.packages = null; // I added this to clear the field after form submission
            vm.focusCase = true;
        }

        /*
          Return to the menu
        */
        function goBack() {
            miscellaneiousSvc.returnToMenu();
        }

        /****************************************
          Public 
        ****************************************/

        /* View Model Variables */
        var vm = this;
        vm.title = "Consume LPN";
        vm.request = {
            case: null,
            packages: null // I added the field to the object
        };

        /* View Model Action Variables */
        vm.working = false;
        vm.focusCase = false;

        /* View Model Functions Variables */
        vm.startConsumeCase = startConsumeCase;
        vm.goBack = goBack;

        /* Functions */
        init();

        return vm;
    };

})();

My problem is that other then adding the field and label, nothing I added works. It won't clear that input on submission, and it's not using that value in the request.

The screen is working properly, and performs that task, but not with the value I added.

Any help or thoughts on this would be very appreciated. I'm sure it's an easy fix, I just literally have no idea what I'm doing.