How to re-render angularjs template for JSP

New to AngularJS and javascript in general so any help here is greatly appreciated. I’m trying handle dynamic validation on some custom directives based on the user’s choice on a drop-down list. I have a controller with functions that return true or false based on which option is currently selected in the drop down and I have created a custom attribute/decorator that is set to the result of these functions.

Basically I’m trying to listen for a change in the value of this attribute and when a change is detected, intercept and appropriately set a working attribute called “optional” and re-push this optional attribute to the template.

** Apologies for the bad code style/formatting the editor didn’t receive the paste very well

From what I’ve found online it seems like the best course of action is to set up a watch on scope in the link but I haven’t successfully figured out how to pass the new value of “optional-if” to the template and recompile it.

 //.jsp file
 <text-question-and-answer
   ng-model="certNumber"
   name="certificateNumber"             
   max-length="30"
   optional-if="isApplyingForUpdate() || showReplacementReasonOther()"
 </text-question-and-answer>

 'use strict';

  angular.module('common')
.directive('textQuestionAndAnswer',
    ['AccessibilityService', 'WebFormsService', 'TextProvider',
    function(AccessibilityService, WebFormsService, TextProvider) 
            {
            return {
                priority: 100,
                restrict: 'E',
                scope: {
                    ngModel: '=',                   
                    name: '@',
                    optional: '@',
                    optionalIf: '&',

                },
                            require: '^form',
                template: function(tElem, tAttrs) {

                    var els = ['label', ' 
                                         description', 'alt-label'];

                    AccessibilityService.readLabelAndDescription(tElem, tAttrs, els);

                    var optional = angular.isDefined(tAttrs.optional) ? ' optional' : '',
                        name = angular.isDefined(tAttrs.name) ? tAttrs.name : tAttrs.ngModel,
                        template = [];

                    if (angular.isDefined(tAttrs.optionalIf)){
                        if(){//this is where I'd check the state of optionalIf 
                            optional = ' optional';
                        } else {
                            optional = ''
                        }
                    }
                    template.push('ng-model="' + tAttrs.ngModel + '"' + optional);
                },

            link: function(scope, element, attrs, form) {                       

                    if (angular.isDefined(attrs.optionalIf)){ 
                        scope.$watch('optionalIf', function() {
                            return scope.optionalIf
                        },
                        function(newValue, oldValue) {


                        });
                    }

Source: AngularJS