title: trouble connecting cefsharp browser with nancy hosted angular web app
body: <p>I have a <a href="http://cefsharp.github.io/" rel="nofollow noreferrer">Cefsharp</a> chromium browser and a simple web application hosted with <a href="http://nancyfx.org/" rel="nofollow noreferrer">Nancy</a> on a local port built into a wpf application. I would like to use angular with my web application, but I am struggling to change variables inside the angular scope. </p>
  
  <p>Directly on the angular page, everything works perfectly. However, when I try to cross the gap between C# and JS, it partially fails. When I fire the call off from C#, the alert windows still appear and the value of <code>report_type</code> does appear to change in the alert box. However, in the <code>ng-switch</code>, nothing is updated. It's almost as if I am not accessing the correct scope when firing the call from C#... yet if that were the case, the methods in the angular scope shouldn't be callable from C#.</p>
  
  <p>in C#, I call this:</p>
  
  <pre><code>private void GIS_Button_Click(object sender, RoutedEventArgs e)
  {
      this.report_browser.GetBrowser().MainFrame.ExecuteJavaScriptAsync("ext_switch_gis();");
  }
  </code></pre>
  
  <p>On the served web page:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var app = angular.module('myApp', []);
  app.controller('myCtrl', function($scope) {
  
    $scope.switch_gis = function switch_gis() {
      alert("begin switch gis");
      $scope.report_type = "gis";
      alert("end switch gis");
      alert("report value is: " + $scope.report_type);
    }
  
    $scope.switch_bar = function switch_bar() {
      alert("begin switch bar");
      $scope.report_type = "bar";
      alert("end switch bar");
      alert("report value is: " + $scope.report_type);
    }
  
    $scope.mytest = function mytest(words) {
      alert(words);
    }
  
    $scope.switch_bar();
  });
  
  function ext_switch_gis() {
    var outside_scope = angular.element(document.getElementById('myAppDiv')).scope();
    outside_scope.mytest("Beginning of external js call!");
    outside_scope.switch_gis();
    outside_scope.mytest("End of external js call!");
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="myAppDiv" ng-app="myApp" ng-controller="myCtrl"&gt;
    &lt;div id="report_switch_div" ng-switch="report_type"&gt;
      &lt;div ng-switch-when="bar"&gt;
        &lt;h1&gt;bar&lt;/h1&gt;
      &lt;/div&gt;
      &lt;div ng-switch-when="gis"&gt;
        &lt;h1&gt;gis&lt;/h1&gt;
      &lt;/div&gt;
      &lt;div ng-switch-default&gt;
        &lt;h1&gt;Select a report type&lt;/h1&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;button ng-click="switch_gis()"&gt;gis test&lt;/button&gt;
    &lt;button ng-click="switch_bar()"&gt;bar test&lt;/button&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>