AngularJS registering DOM elements when added from outside Angular

Question

I have a scenario where I have to add DOM elements using jQuery. But the application I'm working on is developed with angular and I need those elements accessible in Angular. Example Scenario:

function addElement(){
    $('body').append('<div id="outsideDiv" data-ng-click="callFn()">Added from outside angular.</div>')
}
angular.module('myApp',[]).controller('someController',function($scope){
    addElement();
    $scope.callFn = function(){
      console.log("Function Called");
    }
});

I have a similar scenario. How can I access "#outsideDiv" and how my click function will get called? Is there a way to make angular walk the DOM manually and register newly added elements?

Answer 1

In angular, the best practice is to use directives when you modify your html(with jquery etc.)

Directives

In your case I would add a directive that will be a simple element whose dom will be replaced with your new html. You can add event's, function and every thing you need via the new directive.

Answer 2

try with ng-show=somename . when you want to show the html change it as $scope.somename = true; when you want to hide it change as $scope.somename = false in angular controller