Title: Re-Render the directive for directive attribute value change in controller
Tags: angularjs;directive
Question: There is a directive which represents an text input with some additional features within an angular controller. A maximum length is passed to the directive so the entering input text can be limited within the directive based on that parsing value. The maximum Length will be determined using a controller variable which will be change time to time based on the user activities. The directive is given below
<text-box-directive data-max-length="{{maxLength}}"&gt;</<text-box-directive&gt;
This is the directive
angular.module('common.directives')
.directive('textBoxDirective', function ($parse) {
return {
scope: {
// some additional scope variables
},
link: function (scope.element, attrs) {
scope.maxLength = $parse(attrs.maxLength)();
}
Since the maxLength variable is used as an attribute, even though the variable changes, the directive value will not be updated in the directive. I want this value to be updated when the controller value changes, but still the maxLength  variable is required to be an attribute to the directive
Comment: @Claies, as he already mentioned, he wants it to be used as attribute rather than exposing it as two-way bound parameter.

Comment: I agree @Claies. The explanation is bit shady!

Comment: it's not really clear what you are asking here.  Angular uses dynamic re-rendering;  it **already** re-renders everything during a `$digest` cycle.  If you have something that should be affected by `$digest` that isn't, you should **show the code**.  Without a [mcve], the only thing others can offer is a blind guess.

Comment: why are you using `$parse` here? and why are you only using single braces (`{ }`) in your HTML?  just pass the property, and use normal two way binding in `scope`.....

Comment: @Md.AbdulMunim but that explanation doesn't make sense.  where did this idea that an attribute can't be bound to scope come from? perhaps I overstated things when I say two way bound, one way bound would work as well....

Comment: Updated the question :)

Here is the accepted answer: First of all, you don't need to use $parse in your code. You should be receiving an interpolated value.
Now, let's say you have a variable maxLength in your controller $scope and you want to pass it to your directive. With that in mind, you used the directive as below in your template-
<text-box-directive max-text-length="{{maxLength}}"&gt;</<text-box-directive&gt;
Now inside the directive link function, you get the attribute value using following code-
link: function (scope, element, attrs) {
attrs.$observe('maxTextLength', function (newValue) {
scope.maxLength = newValue;
This way you also get notified whenever the value gets changed in controller $scope.
Comment for this answer: for further readings https://docs.angularjs.org/api/ng/service/$compile#attributes


{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 1, 'CommentCount': 6, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2017:00:09/09/17', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<angularjs><directive>', 'Title': 'Re-Render the directive for directive attribute value change in controller', 'ViewCount': 1294, 'id': 46130817, 'user_AboutMe': '', 'user_AccountId': 3605284.0, 'user_DisplayName': 'Sameera Manorathna', 'user_Reputation': 438.0, 'user_Views': 170.0, 'user_id': 3007581.0}}