In my current project, I am working with Bootstrap tabs and modal boxes. To correctly display the data in the modal box, I need to feed it with the right information. The issue arises when I try to define the modal inside the tabs - it doesn't display properly. As a workaround, I have declared the modal at the beginning of the code before the tabs start.
I initially thought that triggering the modal from inside the controller would give the directive access to the data. However, I have tried different approaches without success. This is why I am reaching out for assistance. I want the directive to be able to display data on the modal just like it does in the tested directive inside the controller.
Here is an example of how it works as expected:
<div ng-controller="dataInputCtrl">
<div>
<p>value A :
<input type="textbox" ng-model="userData.a"></input>
</p>
<p>value B :
<input type="textbox" ng-model="userData.b"></input>
</p>
</div>
<div>
<render-item directivedata="userData"></render-item> //This works fine!
</div>
However, here is where I encounter issues:
<div class="modal-body">
<render-item directivedata="userData"></render-item> //Not working here
</div>