Angularjs directive doesn't popup with individual selected row - angularjs

Question

I am trying to pass each scope.selectedLiability based on selection into popup modal from recordRecommendedLiabilityCash directive into detailViewRecommendedLiabilityCash directive on each click.
Here are the core function in recordRecommendedLiabilityCash.
scope.openDetailView = function (id) {
// console.log(scope.recommendedLiabilities[id]);
scope.selectedLiability = scope.recommendedLiabilities[id];
console.log(scope.selectedLiability);
if (!scope.detailViewFlag) {
scope.detailViewFlag = true;
}
};
Up to here everything is okay. In each click console.log(scope.selectedLiability); shows respective selected data. Now, I am trying to pass scope.selectedLiability into nested directive detailViewRecommendedLiabilityCash. However, only first or 0 index value popups in every click.
Picture for index 0
Picture for index 2
If you look carefully on images, we can see both data are same in both clicks. However, I need respective selected data in corresponding click.
Sorry for messed up code. This is not my own code. I am trying help my friend. I stuck here.
//recordRecommendedLiabilityCash directive
.directive('recordRecommendedLiabilityCash', function () {
return {
restrict: 'E',
templateUrl: 'cash/savings-liabilities/recommended-liability-accounts/record-recommended-liability.html',
scope: {
rlc: '=',
liabilities: '=',
listOfLumpSumSource: '=listOfLumpSumSource',
id: '=',
recommendedLiabilities: '='
},
link: function (scope, element, attrs) {
scope.detailViewFlag = false;
scope.removeRecommendedLiabilityRecordCash = function () {
if (scope.rlc.active) {
scope.rlc.active = false;
}
// To-Do: Refactor into reusable function
for (var i = 0; i < scope.liabilities.length; i++) {
if (scope.rlc.legacyId === scope.liabilities[i].id) {
if (!scope.liabilities[i].active) {
scope.liabilities[i].active = true;
}
}
}
};
scope.openDetailView = function (id) {
// console.log(scope.recommendedLiabilities[id]);
scope.selectedLiability = scope.recommendedLiabilities[id];
console.log(scope.selectedLiability);
if (!scope.detailViewFlag) {
scope.detailViewFlag = true;
}
};
}
};
})
//detailViewRecommendedLiabilityCash directive
.directive('detailViewRecommendedLiabilityCash', function () {
return {
restrict: 'E',
templateUrl: 'cash/savings-liabilities/recommended-liability-accounts/detail-view-recommended-liability.html',
scope: {
rlc: '=',
listOfLumpSumSource: '=listOfLumpSumSource',
detailViewFlag: '=',
recommendedLiabilities: '=',
id: '=id',
selectedLiability: '=selectedLiability'
},
link: function (scope, element, attrs) {
console.log(scope.selectedLiability);
scope.rlc.payment_amount = '';
scope.rlc.due_amount = scope.rlc.remainingBalance;
console.log(scope.listOfLumpSumSource);
scope.selectedLumpSumSource = null;
console.log(scope.selectedLumpSumSource);
console.log(scope.recommendedLiabilities, scope.id);
scope.lumpSumDataSource = [
{
"companyName": "FCB",
"productName": "Product1"
},
{
"companyName": "First Command",
"productName": "Product2"
},
{
"companyName": "Second Command",
"productName": "Product3"
}
];
//scope.lumpSumSource = scope.rlc.lumpSumSource;
console.log(scope.rlc.lumpSumSource);
//scope.lumpSumDataSource.push(scope.rlc.lumpSumSource);
// Intialize default variables
var defaultLumpSumObject = {'lumpSumSource': '', 'lumpSumAmount': '', 'remainingBalance': ''};
scope.lumpSumArray = [defaultLumpSumObject];
scope.exisitingAccountObj = {
monthlyPayment: scope.rlc.monthlyPayment
};
// Function to add lumpsum source
scope.addSource = function() {
scope.lumpSumArray.push(defaultLumpSumObject);
};
// Function to delete lumpsum source
scope.deleteSource = function(index) {
scope.lumpSumArray.splice(index,1);
};
scope.closeDetailView = function () {
if (scope.detailViewFlag) {
scope.detailViewFlag = false;
}
};
// When the user clicks anywhere outside of the modal, close it
element.on('click', function (e) {
var target = $(e.target);
if (!target.closest('.modal-content').length) {
scope.$evalAsync(scope.closeDetailView());
}
});
scope.saveRecommendedLiabilityAccount = function () {
scope.rlc.remainingBalance = scope.rlc.remainingBalance - scope.rlc.payment_amount;
scope.rlc.lumpSumAmount = scope.rlc.lumpSumAmount - scope.rlc.payment_amount;
console.log(scope.rlc.lumpSumAmount);
};
}
};
});
<!--recordRecommendedLiabilityCash template -->
<div class="Table-row">
<div class="Table-row-item" data-header="Company">
<a class="edit-view" ng-click="openDetailView(id)" data-toggle="modal" data-target="#{{'modal-detail-view-cash-rec-liability-' + rlc.id}}">{{ rlc.companyName }}</a>
</div>
<div>{{selectedLiability}}</div>
<div class="Table-row-item" data-header="Product">{{ rlc.productName }}{{rlc.id}}{{id}}</div>
<div class="Table-row-item" data-header="Liability Type">{{ rlc.liabilityType }}</div>
<div class="Table-row-item" data-header="Owner">{{ rlc.owner }}</div>
<div class="Table-row-item" data-header="Loan Balance">{{ rlc.remainingBalance | currency:"$":0 }}</div>
<!-- <div class="Table-row-item" data-header="Lump Sum">{{ rlc.LibtyLumpSumFundBal | currency:"$":0 }}</div>-->
<div class="Table-row-item" data-header="Monthly">{{ rlc.monthlyPayment | currency:"$":2 }}</div>
<div class="Table-row-item custom-select" data-header="Action">
<select id="action" name="action">
<option value="">I Want To …</option>
<option value="Retain">Retain</option>
<option value="Consolidate">Consolidate</option>
<option value="Pay-Off">Pay-Off</option>
<option value="Pay-Down">Pay-Down</option>
</select>
<div class="select__arrow"></div>
</div>
<!-- <div class="Table-row-item status" data-header="Status">
<div>{{ rlc.status }}</div>
<a class="close-button" ng-click="removeRecommendedLiabilityRecordCash()"></a>
</div>-->
</div>
<detail-view-recommended-liability-cash rlc="rlc" selected-liability="selectedLiability" recommended-liabilities="recommendedLiabilities" id="id" list-of-lump-sum-source="listOfLumpSumSource" detail-view-flag="detailViewFlag"></detail-view-recommended-liability-cash>
<!-- template for details view recommended liability-cash -->
<div class="modal fade" role="dialog" id="{{'modal-detail-view-cash-rec-liability-' + rlc.id}}">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<span class="close" data-dismiss="modal">×</span>
<h4>Savings - Liabilities <label class="pull-right">{{ rlc.remainingBalance }}</label></h4>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<label class="header-sub-label">Owner: <span>{{ rlc.owner }}</span></label>
<label class="header-sub-label pull-right">Loan Balance</label>
</div>
</div>
</div>
<form name="recommendedLiabilityForm" novalidate >
<div class="modal-body">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3">
<label class="control-label">Company</label>
<label class="control-value">{{ selectedLiability.companyName }}</label>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">
<label class="control-label">Product</label>
<label class="control-value">{{ selectedLiability.productName }}</label>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<label class="control-label">Description</label>
<label class="control-value">{{ selectedLiability.description }}</label>
</div>
</div>
<div class="row display-row">
<div class="col-lg-3 col-md-3 col-sm-3">
<label class="control-label">Liability Type</label>
<label class="control-value">{{ selectedLiability.liabilityType }}</label>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">
<label class="control-label">Mortgage Type</label>
<label class="control-value">{{ selectedLiability.mortgageType }}</label>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">
<label class="control-label">Interest Rate</label>
<label class="control-value">{{ selectedLiability.interestRate | currency:"$":2 }}%</label>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">
<label class="control-label">Payment Type</label>
<label class="control-value">{{ selectedLiability.paymentType }}</label>
</div>
</div>
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3">
<label class="control-label">Current Monthly Payment</label>
<label class="control-value">{{ selectedLiability.monthlyPayment }}</label>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">
<label class="control-label">Payment Frequency</label>
<label class="control-value">{{ selectedLiability.paymentFrequency }}</label>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<label class="control-label">Remaining Term</label><br>
<label class="control-label">Years</label><span> {{ rlc.remainingTermYears }} </span>
<label class="control-label">Months</label><span> {{ rlc.remainingTermMonths }} </span><br>
<label class="control-label">End Date:</label><span> {{ rlc.remainingTermEndDate | date:'yyyy-MM-dd' }} </span>
</div>
</div>
<hr />
<label class="heading">Funding</label>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 form-group">
<label for="monthlyFunding">Recommended Monthly Payment</label>
<input name="monthlyFunding" ng-model="exisitingAccountObj.monthlyPayment" class="form-control col-md-6 col-lg-6 col-sm-6" type="text" />
</div>
</div>
<label class="heading">Lump Sum</label>
<div class="row" ng-repeat="lumpSumData in lumpSumArray track by $index">
<div class="col-lg-3 col-md-3 col-sm-3 form-group">
<label for="source" class="control-label">Source</label>
<select name="source" ng-model="selectedLumpSumSource"
ng-options="lumpSumSource as lumpSumSource for lumpSumSource in listOfLumpSumSource"
class="form-control" ng-change="getLumpSumAmount(selectedLumpSumSource)"></select>
<!--<select name="source" ng-model="source" ng-options="source for source in lumpSumSource" class="form-control"></select>-->
</div>
<div class="col-lg-3 col-md-3 col-sm-3 form-group">
<label for="amount" class="control-label">Amount</label>
<input name="amount" ng-model="rlc.payment_amount" class="form-control" type="number" min="0" max="{{rlc.remainingBalance}}" required />
</div>
<div ng-messages="recommendedLiabilityForm.amount.$error" style="color:red">
<div ng-message="validationError">this is the error</div>
<div ng-message="required">Must have value</div>
<div ng-message="minlength">Must be 5 char length</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<label class="control-label">Remaining Balance</label>
<label class="control-value">{{selectedLiability.lumpSumAmount - selectedLiability.payment_amount | currency:"$":2}}</label>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 vertical-line">
<span class="glyphicon glyphicon-trash" ng-click="deleteSource($index)"></span>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 add-button-container">
<button type="button" class="btn btn-primary" ng-click="addSource()"><span class="glyphicon glyphicon-plus"></span><span class="add-more-button">Add Another Source</span></button>
</div>
</div>
</div>
</form>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">cancel</button>
<button type="submit" class="btn btn-primary" ng-click="saveRecommendedLiabilityAccount()">Save</button>
</div>
</div>
</div>
</div>

Answer 1

It is not clear with the code you pasted, but looks like you are creating N modals, one per each row:
<a class="edit-view" ng-click="openDetailView(id)" data-toggle="modal" data-target="#{{'modal-detail-view-cash-rec-liability-' + rlc.id}}">{{ rlc.companyName }}</a>
This link should open the modal that matches the same rc.id. This means you have N <detail-view-recommended-liability-cash/> directives, one per rc.id. Isn't it? If you did not generate the same amount of <detail-view-recommended-liability-cash/>, one per row, then you cannot identify the opening modal. Still, I think this is a bad idea, as unfortunately you have N modals, all pointing to the same scope.selectedLiability object. I'm not 100% sure, but if you mess something, can be the case that you're always seeing the last rendered modal. Also, bootstrap is plain JS + jQuery, and you're using Angular for the directive.
I think what is happening is that when you click for the first time, Angular is rendering all the modals pointing to the same object, but on the subsequent clicks the objects are not refreshed on the directives. Perhaps a $scope.$apply() can fix the bug?
Try to clean your code so you have only one modal, and make sure it is isolated as a directive, and before doing scope.detailViewFlag = true, make sure you cleaned everything before. In general, JS and Angular do not play well, and you need to abuse the use of scope.$apply() on the JS calls. That's why the angular directives for bootstrap isolates the modals passing a new object, a new controller, etc.
To sum up: you have a lot of modals on your code, one per row, pointing to the same object on the recordRecommendedLiabilityCash directive. When you click for the first time, all the modals are "filled", but on the second click you never cleaned the information from the modals, and Angular never refreshed the information. To fix this: use only one modal, and make sure you're cleaning the information before opening the modal.
90% sure that's your problem. Try to avoid modals by id, and control them manually on JS within Angular, and check when to execute the $apply().
Regards!