Angularjs directive input binding with bootstrap popover

So I am trying to make a directive that is encapsulated inside a Bootstrap popover. Almost everything is working - I have event listeners to know when buttons get clicked, links, everything is hunkey-dory - except for the fact that even though I am using ng-model to bind to the input in the innermost directive, nothing is getting updated. It's almost as if it's doing a one-way binding instead of a two-way. FieldValue on the model is always null (its initial state), and is never altered (even though it should be equal to whatever was put in the input field). I have looked through a ton of answers and nothing seems to address the issue.

Here is my code:

Page HTML

<table class="table table-bordered table-striped">
    <tbody>
        <tr ng-repeat="field in model.CustomFields">
            <td>{{field.Title}}</td>
            <td>
                <a popover field-description="field.CustomField.Description" model-value="field.FieldValue" class="trigger">
                    <text-custom-field text-model="field"></text-custom-field>{{field.FieldValue || 'Empty'}}
                </a>
            </td>
        </tr>
    </tbody>
</table>

Popover Directive

(function() {
'use strict';

angular
    .module('app.directives')
    .directive('popover', popover);

popover.$inject = ['$compile'];

function popover($compile) {

    var directive = {
        link: link,
        restrict: 'A',
        scope: {
            fieldDescription: '=',
            modelValue: '='
        }
    };
    return directive;

    function link(scope, element, attrs) {
        $(element).popover({
            html: true,
            placement: 'top',
            title: scope.fieldDescription,
            content: function () {
                return $(this).parent().find('.js-popover-content').html() + '<button ng-click="submit()" type="submit" class="btn btn-primary btn-sm" style="margin-right: 5px;"><i class="glyphicon glyphicon-ok"></i></button><button type="button" class="btn btn-default btn-sm edit-cancel" ng-click="closePop()" style="margin-right: 5px;"><i class="glyphicon glyphicon-remove"></i></button>';
            }
        });

        scope.closePop = function () {
            console.log('close');
            $('.trigger').popover('hide');
        };

        scope.submit = function () {
            console.log('submit');
            scope.$parent.$broadcast('submit');
        };

        scope.$parent.submitData = function (value) {
            scope.modelValue = value;
            console.log('submitted data');
            scope.closePop();
        };

        $(element).on('click', function (e) {
            $('.trigger').not(this).popover('hide');
            $compile($('.popover.in').contents())(scope);
        });
    }
}
})();

Inner Directive

(function() {
'use strict';

angular
    .module('app.directives')
    .directive('textCustomField', textCustomField);

function textCustomField() {

    var directive = {
        templateUrl: 'url/templates/TextCustomField.html',
        restrict: 'E',
        transclude: true,
        link: link,
        scope: {
            textModel: '='
        }
    };

    return directive;

    function link(scope, element, attrs) {
        scope.$parent.$on('submit', function (event) {
            console.log('heard submit event');
            var value = scope.textModel.FieldValue;
            console.log(value);
            scope.$parent.submitData(value);
        });
    }
}
})();

Directive HTML

<div class="js-popover-content hide">
    <div class="form-group" style="display: inline-flex;">
        <input type="text" class="form-control" ng-model="textModel.FieldValue" style="width: {{textModel.CustomField.DisplaySize}}; margin-right: 5px;">
    </div>
</div>

Does anyone have any ideas why this isn't working?