title: Onsen - Buttons in dialog not working
body: <p>I'am making a cordova application with onsen ui. I created i a dialog as onsen website told.</p>
  
  <p>My buttons in dialog are not working. </p>
  
  <p>questlistapp.js</p>
  
  <pre><code>var questlistmodule = angular.module('qntrquest', ['onsen']);
  
  var collobraTem = null;
  
  questlistmodule.controller('listCtrl', function($scope, $http){
  $http.defaults.headers.post = {'Content-Type':'application/json'};
  
  $scope.init = function(){
      var api_key = "Z******"
  
      var url = "http://**********";
      var id = 1;
      $http.post(url, {apikey: api_key.toString(), id: id.toString()}).
      success(function(data, status, headers, config){
          $scope.items = data;
      }).
      error(function(data, status, headers, config){
          alert("error: "+data);
      });
  };
  
  $scope.foo = function(id){
      //$scope.items[index]'ile verileri alıp diğer ekrana geçireceğimiz için index numarası bize gerekiyor.
      var index = $scope.findIndex(id);
      collobraTem = $scope.items[index];
      $scope.navi.pushPage('questdetail.html', {item: $scope.items[index]});
  };
  
  $scope.findIndex = function(aimId){
      var index = 0;
      var itemId = $scope.items[index].id;
      while(itemId != aimId){
          index++;
          itemId = $scope.items[index].id;
      }
      return index;
  };
  
  });
  
  
  
  questlistmodule.controller('detailCtrl', function($scope, $http){
  $scope.item = collobraTem;
  $scope.dialogs = {};
  
  /**
   * Camera veya galeri için hangisinin seçileceğine dair dialog
   */
  $scope.showdialog = function(dlg){
      if (!$scope.dialogs[dlg]) {
          ons.createDialog(dlg).then(function(dialog) {
              $scope.dialogs[dlg] = dialog;
              dialog.show();
          });
      }
      else {
          $scope.dialogs[dlg].show();
      }
  
  };
  
  $scope.useCamera = function(){
      console.log("camera in use");
      navigator.camera.getPicture(function(){
          alert("done");
      }, function(message){
          console.log("failed because "+message);
      }, { quality: 50,
          destinationType: Camera.DestinationType.FILE_URI });
  };
  
  $scope.useGallery = function(){
      alert("gallery");
  };
  });
  
  questlistmodule.controller('cameradialogCtrl', function($scope, $http){
  
  $scope.useCamera = function(){
      console.log("camera in use");
      navigator.camera.getPicture(function(){
          alert("done");
      }, function(message){
          console.log("failed because "+message);
      }, { quality: 50,
          destinationType: Camera.DestinationType.FILE_URI });
  
  };
  
  $scope.useGallery = function(){
      alert("gallery");
  };
  });
  </code></pre>
  
  <p>There is no problem with listCtrl its working well.</p>
  
  <p>And here is questdetail.html</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  
  &lt;link rel="stylesheet" href="lib/onsen/css/onsenui.css"&gt;
  &lt;link rel="stylesheet" href="lib/onsen/css/onsen-css-components-blue-basic-theme.css"&gt;
  
  &lt;script src="lib/onsen/js/angular/angular.js"&gt;&lt;/script&gt;
  &lt;script src="lib/onsen/js/onsenui.js"&gt;&lt;/script&gt;
  &lt;style&gt;
      .page--shop-details__content {
          position: absolute;
          left: 0px;
          right: 0px;
          top: 0px !important;
          bottom: 0px;
      }
      .card {
          background-color: white;
          background-image: url(item.logo);
          background-repeat: no-repeat;
          background-size: cover;
          color: white;
          height: 250px;
      }
      .card-toolbar ons-back-button span {
          color: white;
      }
      .card-name {
          font-weight: 600;
          font-size: 20px;
          padding: 66px 0 8px 0;
          text-align: center;
      }
      .card-desc {
          font-size: 14px;
          font-weight: 400;
          opacity: 0.9;
          text-align: center;
          line-height: 1.4;
      }
      .rating {
          text-align: center;
          position: relative;
          height: 0px;
      }
      .rating-num {
          position: relative;
          top: -24px;
          height: 24px;
          color: white;
          line-height: 24px;
          font-size: 12px;
          font-weight: 600;
          text-align: center;
          border-radius: 4px 4px 0 0;
          padding: 0 6px;
          background-color: #eb482f;
          color: white;
          width: auto;
          margin: 0 auto 0 auto;
          display: inline-block;
      }
      .rating-num ons-icon {
          font-size: 11px;
          vertical-align: -0px;
      }
      .action-col {
          text-align: center;
          opacity: 0.4;
          padding: 10px 0 8px;
      }
      .action-col:active {
          opacity: 0.7;
      }
      .action-col ons-button {
          padding: 0;
          line-height: 1;
      }
      .action-icon {
          padding: 0 0 4px 0;
      }
      .action-icon ons-icon {
          font-size: 28px;
      }
      .action-label {
          font-size: 12px;
      }
      .prop-desc {
          font-size: 14px;
          opacity: 0.7;
      }
      .prop-desc ons-icon {
          font-size: 14px;
          vertical-align: -0px;
          opacity: 0.5;
      }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;ons-page modifier="shop-details" ng-controller='detailCtrl'&gt;
        &lt;ons-toolbar&gt;
          &lt;div class="left"&gt;&lt;ons-back-button&gt;Back&lt;/ons-back-button&gt;&lt;/div&gt;
          &lt;div class="center"&gt;{{item.name}}&lt;/div&gt;
        &lt;/ons-toolbar&gt;
  
      &lt;div class="card" style="background-image:url({{item.logo}})"&gt;
  
        &lt;div class="card-name"&gt;{{item.name}}&lt;/div&gt;
        &lt;div class="card-desc"&gt;{{item.description}}&lt;/div&gt;
  
      &lt;/div&gt;
  
      &lt;div class="rating"&gt;&lt;div class="rating-num"&gt;
          Ready?
      &lt;/div&gt;&lt;/div&gt;
  
      &lt;ons-list style="border-top: none"&gt;&lt;ons-list-item style="line-height: 1; padding: 0;"&gt;
        &lt;ons-row class="action"&gt;
  
          &lt;ons-col class="action-col" ng-click="showdialog('cameradialog.html')"&gt;
            &lt;div class="action-icon"&gt;&lt;ons-icon icon="ion-arrow-up-a"&gt;&lt;/ons-icon&gt;&lt;/div&gt;
            &lt;div class="action-label"&gt;Qentured!&lt;/div&gt;
          &lt;/ons-col&gt;
  
          &lt;ons-col class="action-col"&gt;
            &lt;div class="action-icon"&gt;&lt;ons-icon icon="ion-bookmark"&gt;&lt;/ons-icon&gt;&lt;/div&gt;
            &lt;div class="action-label"&gt;Add to Wishlist&lt;/div&gt;
          &lt;/ons-col&gt;
  
          &lt;ons-col class="action-col"&gt;
            &lt;div class="action-icon"&gt;&lt;ons-icon icon="ion-share"&gt;&lt;/ons-icon&gt;&lt;/div&gt;
            &lt;div class="action-label"&gt;Share&lt;/div&gt;
          &lt;/ons-col&gt;
        &lt;/ons-row&gt;
      &lt;/ons-list-item&gt;&lt;/ons-list&gt;
    &lt;ons-template id="cameradialog.html" ng-controller="cameradialogCtrl"&gt;
        &lt;ons-dialog var="dialog" cancelable&gt;
            &lt;ons-list&gt;
                &lt;ons-list-item modifier="tappable"&gt;
                    &lt;ons-button modifier="large--quiet" ng-click="useCamera()"&gt;Camera&lt;/ons-button&gt;
                &lt;/ons-list-item&gt;
                &lt;ons-list-item modifier="tappable"&gt;
                    &lt;ons-button modifier="large--quiet" ng-click="useGallery()"&gt;Gallery&lt;/ons-button&gt;
                &lt;/ons-list-item&gt;
            &lt;/ons-list&gt;
  
        &lt;/ons-dialog&gt;
    &lt;/ons-template&gt;
  
    &lt;/ons-page&gt;
    &lt;/body&gt;
    &lt;/html&gt;
  </code></pre>
  
  <p>I am not sure what is blocking ng-click event or is it wants to call useCamera() function in different scope, context or controller i don't know, where is the problem? Can you help me to solve?</p>
  
  <p>I am just seeking to use useCamera() function.</p>