Issue with Angular JS - angularjs

Question

I am a UI developer and I am completely new to Angular, however, I understand jQuery. I have joined a new company and they use Angular JS with JAVA. I have been assigned a task over which I am banging head for the past few days. I've come under the scanner now.
Basically I have a table in .html page to which data is coming (Sorry, I am told that I would need atleast 10 reputation to post a screen shot). Now I want to other column in that table.
I have tried adding that column in columns_panel.js but still it is not coming in the grid by default.
I understand that my question is not clear over here, but trust me, even my Team lead is also not willing to disclose any thing.
Can any JS guru's be help to me?
<div columns-panel columns="columns" show-panel="showColumnsPanel"></div>
<table class="responsive">
<thead>
<tr>
<th>
</th>
<th class="isFlagged">
<div class="flag"></div>
</th>
<th ng-repeat="column in columns" ng-click="sortBy(column)" class="{{ column }}">
<a class="th-inner">
{{ column | translate }}
<span ng-show="isSortColumn(column)"
ng-class="{'sort-icon-desc': !isSortAscending(),
'sort-icon-asc': isSortAscending()}">
</span>
</a>
</th>
<!--<th class="toggle-columns-header">-->
<!--<a class="th-inner" ng-click="showColumnsPanel = !showColumnsPanel">+</a>-->
<!--</th>-->
</tr>
</thead>
<tbody>
<tr ng-repeat="dispute in disputes.currentPage"
ng-class="isSelected(dispute) ? '{{ dispute | disputeTrClass }} checked-dispute' : '{{ dispute | disputeTrClass }}'"
ng-click="goToDisputeDetails(dispute)">
<td ng-class="isNegative(dispute) ? 'select-dispute alert-corner' : 'select-dispute'" ng-click="$event.stopPropagation()">
<input id="select-dispute-{{ dispute.id }}" type="checkbox" ng-click="toggleSelectedDispute(dispute)" ng-checked="isSelected(dispute)" ng-disabled="!dispute.isFlaggable" ng-hide="!dispute.isFlaggable" />
<label for="select-dispute-{{ dispute.id }}" ng-hide="!dispute.isFlaggable"></label>
</td>
<td class="isFlagged" ng-click="toggleFlag(dispute, $event)">
<div ng-show="dispute.isFlaggable" class="flag {{ dispute.isFlagged ? 'flagged' : 'unflagged' }}"></div>
</td>
<td ng-repeat="column in columns" class="{{ column }}">
<div data-ng-switch data-on="column">
<div data-ng-switch-when="reason">
{{ dispute[column] }}
<span class="reason-code" ng-if="dispute.reason !== 'N/A'">{{ dispute.reasonCode }}</span>
</div>
<div data-ng-switch-when="status">
{{ dispute[column]=="Urgent Response Required"?"Response Required":dispute[column] }}
</div>
<div data-ng-switch-when="amount">
<div ng-if="isNegative(dispute)" class="negative">
-<span class="currency">$</span>{{ dispute[column] * -1 | number:2 }}
</div>
<div ng-if="isPositive(dispute)">
<span class="currency">$</span>{{ dispute[column] | number:2 }}
</div>
</div>
<div data-ng-switch-when="dateReceived">
{{ dispute[column] | translatedDate }}
</div>
<div data-ng-switch-when="respondBy">
{{ dispute[column] | translatedDate }}
</div>
<div data-ng-switch-when="respondedOn">
{{ dispute[column] | translatedDate }}
</div>
<div data-ng-switch-default>
{{ dispute[column] }}
</div>
</div>
</td>
<!--<td class="{{ columns[columns.length - 1] }}"></td>-->
</tr>
</tbody>
</table>
<!-- No Disputes To Display -->
<div disputes-table-empty></div>
<!-- Error Message -->
<div disputes-table-error></div>
<style type="text/css">
.status {
padding-left: 27px !important;
}
</style>
This is the Model
DisputeModule.value('Dispute', function (attributes) {
this.id = attributes.id;
this.amount = attributes.amount;
this.cancelDate = attributes.cancelDate;
this.cancellationNumber = attributes.cancellationNumber;
this.cancelZone = attributes.cancelZone;
this.cardDeposit = attributes.cardDeposit;
this.cardMemberName = attributes.cardMemberName;
this.cardNumber = attributes.cardNumber;
this.chargeAmount = attributes.chargeAmount;
this.chargeDate = attributes.chargeDate;
this.creditReceived = attributes.creditReceived;
this.dateReceived = attributes.dateReceived;
this.disputeNumber = attributes.disputeNumber;
this.description = attributes.description;
this.isFlaggable = attributes.isFlaggable;
this.isFlagged = attributes.isFlagged;
this.locationID = attributes.locationID;
this.merchandiseReturned = attributes.merchandiseReturned;
this.merchandiseType = attributes.merchandiseType;
this.merchantAccount = attributes.merchantAccount;
this.modeOfReturn = attributes.modeOfReturn;
this.originalCardNbr = attributes.originalCardNbr;
this.payeeLocationId = attributes.payeeLocationId;
this.payeeSENbr = attributes.payeeSENbr;
this.reason = attributes.reason;
this.reasonCode = attributes.reasonCode;
this.referenceNumber = attributes.referenceNumber;
this.reservationCanceled = attributes.reservationCanceled;
this.reservationCanceledDate = attributes.reservationCanceledDate;
this.stage = attributes.stage;
this.status = attributes.status;
});
This is the columns_panel.js
DisputeModule.directive('columnsPanel', function (BASE_URL) {
var defaultColumns = [
'disputeNumber',
'status',
'dateReceived',
'respondBy',
'respondedOn',
'type',
'reason',
'cardNumber',
'originalCardNbr',
'transactionDate',
'referenceNumber',
'resolution',
'merchantAccount',
'locationID',
'payeeSENbr',
'payeeLocationId',
'chargeAmount',
'amount'
];
var availableColumns = [
'disputeNumber',
'status',
'dateReceived',
'respondBy',
'respondedOn',
'type',
'reason',
'cardNumber',
'originalCardNbr',
'transactionDate',
'referenceNumber',
'resolution',
'merchantAccount',
'locationID',
'payeeSENbr',
'payeeLocationId',
'chargeAmount',
'amount'
];
var columns = defaultColumns.slice();
return {
templateUrl: BASE_URL + '/resources/views/columns_panel.html',
scope: {
columns: '=',
showPanel: '='
},
controller: function ($scope) {
function addColumn(column) {
var tmpColumns = $scope.columns.slice();
tmpColumns.push(column);
tmpColumns.sort(function (a, b) {
return $scope.availableColumns.indexOf(a) - $scope.availableColumns.indexOf(b);
});
updateColumns(tmpColumns);
}
$scope.columns = columns;
$scope.availableColumns = availableColumns;
$scope.isSelected = function (column) {
return $scope.columns.indexOf(column) > -1;
};
$scope.toggleColumn = function (column) {
var columnIndex = $scope.columns.indexOf(column);
if (columnIndex === -1) {
addColumn(column);
} else {
$scope.columns.splice(columnIndex, 1);
}
};
$scope.reset = function () {
updateColumns(defaultColumns.slice());
};
$scope.close = function () {
$scope.showPanel = false;
};
function updateColumns(newColumns) {
$scope.columns = columns = newColumns;
}
}
};
});
I want to add "chargeAmount" to appear in the grid/table

Answer 1

you must have another columns somewhere, this columns
<div columns-panel columns="columns" show-panel="showColumnsPanel"></div>
try to add to your directive datas (the columns).
they are called here
scope: {
columns: '=',
showPanel: '='
},
and gave to the directive scope here
$scope.columns = columns;
so in your controller try to see what you have in columns