How to send input value from custom directive through $resource in Angular?

Question

I've found answers about using ngModel within a custom directive, and I understand the concept, but I'm not sure if I am understanding how to implement it when using $resource.

I'm successfully injecting the "file" scope into my directive, and I'm making the api call, but the value that's getting returned to my server is null. I'm sure my Angular directive implementation is where my fault lies.

directive.js

angular.module('pro').directive('buyLinkBox', function() {
     return {
        restrict: "AE",
        replace: true,
        template: '<md-input-container md-no-float md-block><label style="font-size:2.2vh">Buy Link for {{file.filename}}</label><input type="text" ng-blur="sendLink()" ng-model="file.buyLink" name="buyLink" id="buyLink"/></md-input-container>',
        scope: {
            file: '=',
        },
        controller: function($scope, $route ,BuyLinkService){

            $scope.sending = BuyLinkService.get({
                FileId: $scope.file._id
            });

            $scope.sendLink = function() {
                $scope.sending.$sendLink(function() {
                    $route.reload();
                }, function(errorResponse) {
                    alert('nope');
                });
            };



        }
     }
});

html

 <buy-link-box file="file"></buy-link-box>

Answer 1

After some deduction I found a solution.

I added the ngModel to the directive scope and included it in my html as well. But the major issue was that my resource was being called before it got my data. The fix was simple of course. I created a callback and set my desired field to the input variable BEFORE initiating my PUT api call.

Hope this helps someone.

directive.js

    angular.module('pro').directive('buyLinkBox',['BuyLinkService', '$route', 
        function(BuyLinkService, $route) {
         return {
            restrict: "E",
            replace: true,
            template: '<md-input-container md-no-float md-block><label style="font-size:2.2vh">Buy Link for {{file.filename}}</label><input type="text" ng-blur="sendLink()" ng-model="ngModel" name="buyLink" id="buyLink"/></md-input-container>',
            scope: {
                file: '=',
                ngModel: '='
            },
            link: function(scope, element, attrs){

                scope.sendLink = function() {
                    BuyLinkService.get({MixedId: scope.file._id}, function(data){
                    data.buyLink = scope.file.buyLink;
                    data.$sendLink(function(file) {
                        alert(file.buyLink);
                        $route.reload();
                    }, function(errorResponse) {
                        alert('nope');
                    });
                })
              }
            }
         }

  }]);

html

<buy-link-box ng-model="file.buyLink" file="file"></buy-link-box>