How to use Angular controller in Zeppelin - apache-zeppelin

Question

I'm new to Zeppelin, recently I'm study how to use Zeppelin in my current project. I want to add a Angular controller in Zeppelin paragraph. But it's failed. Can you please give me some hints how to solve it? Below is my code.
println(s"""
%angular
<script>
angular.module('zeppelinWebApp').controller('myNewController', myNewController);
function myNewController() {
var vm = this;
vm.publicVariable = {};
// Controller's public functions
vm.myControllerPublicFunction = myControllerPublicFunction;
_init();
function myControllerPublicFunction() {
publicVariable = publicVariable + 1;
}
function _init() {
vm.myControllerPublicFunction();
}
}
</script>
<div ng-controller="myNewController as newCtrl">
<div ng-click="newCtrl.myControllerPublicFunction" ng-bind='newCtrl.publicVariable'></div>
</div>
""")

Answer 1

Been struggling with this myself. The best answer I've come up with is to create a pseudo-controller by grabbing a scoped element using jQuery (based off this GitHub gist):
println(s"""
%angular
<script>
var element = $('#ctrlHook');
var scope = angular.element(element.parent('.ng-scope')).scope().compiledScope;
(function myNewController() {
var vm = scope;
vm.publicVariable = 0;
// Controller's public functions
vm.myControllerPublicFunction = myControllerPublicFunction;
_init();
function myControllerPublicFunction() {
vm.publicVariable = vm.publicVariable + 1;
}
function _init() {
vm.myControllerPublicFunction();
}
})();
</script>
<div id="ctrlHook">
<div ng-click="myControllerPublicFunction" ng-bind='publicVariable'></div>
</div>
""")
You can of course remove the function block and just operate on scope directly instead of on vm, but I left it in to adhere to your original example as much as possible (I tidied up some variable references where you were calling publicVariable instead of vm.publicVariable and treating it like a number instead of the object it was initialised as).
NB: I cannot confirm whether the variable changes themselves would fix your original code, but I have tested grabbing the scope using the method above and it seems to work. Hope it helps you out.