Park Taecyeon Park Taecyeon - 6 months ago 73
AngularJS Question

Putting $scope in Cytoscape click event

I have created a network graph using Cytoscapejs. I am trying to unhide a div, and load more things after the user click on edge of the graph.

I have the following in my controller:

CytoscapeService.getGraph().on('tap', 'edge[id = "123"]', function (event) {

//Above console printout works.

//The below does not work on index.html
$scope.testMessage = "Hello World";
$scope.showMe = function () {
$ = true;



// This works though.
//$scope.testMessage = "Hi from outside";

And in Index.html:

<div ng-controller="MainCtrl" class="container" ng-show="show">


<div ng-controller="MainCtrl">

The console.log does get print out but the $scope.showMe with function inside isn't being called. However, if I move the scope outside of this clause, into the main clause of the Controller, it works.

Any there alternatives on how I can achieve this?


This is common with angular when you are using jquery events to update a $scope value. You will have to manually triger a $scope apply:

    $ = true;

Another solution would be to use Angular's $timeout

$timeout(function () {
    $ = true;