When using @ in this context, the value needs to come from an attribute with the {{}} interpolation directive. It appears that the directive is being loaded first and then the evaluation of vm.index takes place. As a result, the changes are not reflected in the current digest cycle. To ensure these changes are applied, you should run the digest cycle in a safer manner using $timeout.
$timeout(function(){
vm.index = parseInt(vm.index, 10)
})
This code snippet ensures that the value is converted to a decimal format. The addition will take place within the directive's HTML
<h2>Item {{ vm.index + 1 }}</h2>
Check out the Working Demo
Possible Reason for this Issue
After discussing with @dsfq, we examined the angular $compile API and found a method called initializeDirectiveBindings which only gets invoked when using controllerAs in a directive with an isolated scope. Within this function, there are switch cases for various bindings such as @, =, and &. Since you are using @, the corresponding switch case is executed.
Code Snippet
case '@':
if (!optional && !hasOwnProperty.call(attrs, attrName)) {
destination[scopeName] = attrs[attrName] = void 0;
}
attrs.$observe(attrName, function(value) {
if (isString(value)) {
destination[scopeName] = value;
}
});
attrs.$$observers[attrName].$$scope = scope;
if (isString(attrs[attrName])) {
destination[scopeName] = $interpolate(attrs[attrName])(scope);
}
break;
In the above code, you can see that attrs.$observe is used as a watcher, typically employed when the value contains an interpolation like {{index}} in our scenario. This means that the $observe is triggered during the digest cycle. Hence, using $timeout while converting the index value to a decimal is crucial.
The reason @dsfq's solution works is due to his use of = providing two-way binding, where the code directly retrieves the value from the isolated scope without the need for a watcher. You can find the relevant code here. Consequently, the value gets updated without requiring a new digest cycle.