Question

i’m changing a innter html of a dom element with a button. And when button is clicked i want to fire another controller function. Something like that. … But is not working :).

$scope.addBtn = function() {
   $('domtarget').html('<button ng-click="removeButton();"></button>');
}

$scope.removeBtn = function() {
   $('domtarget').html('');
}

Please suggest fix 🙂

Answer 1

Do not modify DOM inside your controller, ever.

<div ng-show="showMe"></div>
<button ng-click="showMe = !showMe;anotherAction()">Switch</button>
<button ng-click="someOtherAction()">Switch2</button>

.

function SomeCtrl($scope) {
    $scope.showMe=true;
    $scope.anotherAction = function () {
        alert("gotcha");
    };
    $scope.someOtherAction = function () {
        $scope.showMe = !$scope.showMe;
        $scope.anotherAction();
    };
}

For hiding/showing an element conditionally, use ng-show or ng-hide.
For firing an event on click, use ng-click