Udating parent object from isolated scope in directive is not working at all

Question

I have a directive defined like that:

myApp.directive('someDirective', function() {
return {
    restrict: 'A',
    scope: {

        disableButton: '=',
    },
    templateUrl: 'sometemplate.html',
    controller: 'SomeDirectiveController'
}

});

The controller for the directive looks as follows:

mLoan.controller('GiversDirectiveController', function (
$scope,
) {

$scope.checkGiversAmount = function () {
    var giversCurrentTotalValue = $scope.stocksTotalAmount - $scope.giversCurrentAmount;

}

this is the directive view

  <div class="row">
    <div class="col-lg-2">
        <label for="customer">Wybierz klienta</label>
        <select id="customer"
                name="customer"
                class="form-control"
                ng-model="selectedCustomerId"
                ng-options="customer.Id as customer.Name for customer in customers"
                ng-change="getGiversFunds(selectedCustomerId)"
                required=""></select>
    </div>
    <div class="col-lg-2" ng-show="customerFunds.length > 0">
        <label for="customerFunds">Wybierz fundusz</label>
        <select id="customerFunds"
                name="customerFunds"
                class="form-control"
                ng-model="selectedFundId"
                ng-options="customerFund.Id as customerFund.Name for customerFund in customerFunds"
                ng-blur="updateGiverFund(selectedCustomerId, selectedFundId)"
                ng-required="customerFunds.length > 0"></select>
    </div>
    <div class="col-lg-2">
        <label for="giversCurrentAmount">Ilość</label>
        <input type="number" min="1"
               max="{{giversCurrentAmount}}"
               id="giversCurrentAmount"
               name="giversCurrentAmount"
               class="form-control"
               ng-model="giversCurrentAmount"
               ng-change="checkGiversAmount(selectedFundId)"
               ng-blur="updateGiverStockAmount(selectedCustomerId, giversCurrentAmount)"
               required />
    </div>
    <div class="col-lg-2">
        <label for="commission">FEE%</label>
        <input type="number"
               min="1"
               id="commission"
               name="commission"
               class="form-control"
               ng-model="commission"
               ng-blur="updateGiverCommission(selectedCustomerId, commission)"
               required />
    </div>
    <div class="col-lg-4">
        <label for="minimalCommission">FEE Min</label>
        <input type="number"
               min="1"
               id="minimalCommission"
               name="minimalCommission"
               class="form-control"
               ng-model="minimalCommission"
               ng-blur="updateGiverMinimalCommission(selectedCustomerId, minimalCommission)"
               required />
    </div>
</div>

And a parent view where I'm Using the directive with the button:

 <div ng-repeat="giver in givers">
                    <div givers-directive givers="givers"
                         givers-current-amount="giversCurrentAmount"
                         disable-giver-side-add="parent"
                         stocks-total-amount="stocksTotalAmount">
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12 margin-top-10px">
                        <button id="addGiverSide"
                                name="saveLoan"
                                class="btn btn-primary"
                                ng-click="addGiverSide(AddLoansForm)"
                                ng-disabled="disableButton">
                            Dodaj
                        </button>
                    </div>
                </div>

Now my problem and question ath the same time is how I can update the disableButton from the parent model. Before you say this is a duplicate I've ran through the solutions taht was on stackoverflow mainly this one: How to access parent scope from within a custom directive *with own scope* in AngularJS? and that one: What are the nuances of scope prototypal / prototypical inheritance in AngularJS? but nothing seems to help. What is straneg (or not) I can't use the $parent to get to that. I have to go through: $scope.$parent.$parent path and then it's getting updated. Besides that it looks ugly and strange, it's not working when I'm trying to updated this variable from the parent view. To sum up one effect is working and the other is not. And after changing is the other way around. I've tried to wrap up the disable button into an object and try to do the change but this does not work also. Or maybe I'm doing it wrong. Please kindly help me because I'm running out of ideas. What am I doing wrong?

UPDATE

I'm adding the rest of the directive view to show the concept what I'm trying to achieve here. THere are drop downs wich I want them to be independent. Because without the directive with separated (or isolated) scope the two dropdowns are getting filled by changing the other. I want to change them indepenently. I've managed to achieve thet through out the isolated scope. But now I can't seem to get the disabling button working.

Answer 1

By defining a scope inside your directive, you lock your directive out of the parent's scope. If you want to make use of a parent scope, you should set your scope to true.

You can read more on the matter here: http://www.sitepoint.com/practical-guide-angularjs-directives/

EDIT: Example

myApp.directive('someDirective', function() {
return {
    restrict: 'A',
    scope: true,
    templateUrl: 'sometemplate.html',
    controller: 'SomeDirectiveController'
}