title: Calling an Android function from AngularJS controller
body: <p>I have a problem which I need some help with. I'm trying to call an android function by using an angular controller in my frontend, but I can't get it to work. </p>
  
  <p>MainActivity:</p>
  
  <pre><code>@Override
  protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
  
      mWebView = (WebView)findViewById(R.id.activity_main_webview);
      mWebView.setWebViewClient(new CustomWebViewClient());
      WebSettings webSettings = mWebView.getSettings();
      webSettings.setJavaScriptEnabled(true);
      mWebView.addJavascriptInterface(new AngularJSInterface(this), "Android");
      mWebView.loadUrl("http://192.168.70.101:3000/");
  
  }
  </code></pre>
  
  <p>AngularJSInterface:</p>
  
  <pre><code>public class AngularJSInterface {
  
  Context mContext;
  
  AngularJSInterface(Context c) {
      mContext = c;
  }
  
  public void showToast(String toast) {
      Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
  }
  </code></pre>
  
  <p>}</p>
  
  <p>Angular Controller:</p>
  
  <pre><code>angular.module('app').controller('ComplaintCtrl', function ($scope, $http, complaintService) {
  
      $scope.showToast = function(toast) {
          Android.showToast(toast);
          console.log("toast");
  }
  </code></pre>
  
  <p>});</p>
  
  <p>The HTML:</p>
  
  <pre><code>&lt;button label="toast" ng-click="showToast('Visar toast från angularJS')"&gt;toast&lt;/button&gt;
  </code></pre>
  
  <p>Error from console:</p>
  
  <pre><code>ReferenceError: Android is not defined
  at Scope.$scope.showToast (http://localhost:3000/scripts/controllers/addcomplaint.js:34:3)
  at http://localhost:3000/bower_components/angular/angular.js:10567:21
  at http://localhost:3000/bower_components/angular-touch/angular-touch.js:438:9
  at Scope.$eval (http://localhost:3000/bower_components/angular/angular.js:12412:28)
  at Scope.$apply (http://localhost:3000/bower_components/angular/angular.js:12510:23)
  at HTMLButtonElement.&lt;anonymous&gt; (http://localhost:3000/bower_components/angular-touch/angular-touch.js:437:13)
  at HTMLButtonElement.jQuery.event.dispatch (http://localhost:3000/bower_components/jquery/dist/jquery.js:4409:9)
  at HTMLButtonElement.elemData.handle (http://localhost:3000/bower_components/jquery/dist/jquery.js:4095:28) 
  </code></pre>
  
  <p>This is the first time I'm using this sort of thing and I'm not quite sure how to actually do it. I've tried looking for answers by googling but with no luck. What am I doing wrong?</p>