Input in Modal not bound to scope


I created a sidemenu project with
ionic start IonicTest sidemenu

And add a modal to the project, which the html part is

  1. add a button to the nav, with ng-click
  <ion-nav-buttons side="left">
    <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
    <ion-nav-buttons side="right">
    <button class="button button-icon icon ion-upload" ng-click="openUpload()"></button>
  <ion-content class="has-header">
      <ion-item ng-repeat="playlist in playlists" href="#/app/playlists/{{}}">
  1. the modal view
<h1 class="title">Upload</h1>
<form ng-submit="upload()">
  <input type="text" ng-modal="data.url">
  <button class="button button-block button-positive" type="submit">Upload</button>

and controller part is

controller('PlaylistsCtrl', function($scope, $ionicModal) {
    $ = {"url": ""};
    $ionicModal.fromTemplateUrl('templates/upload.html', {
        scope: $scope
    }).then(function(modal) {
        $scope.modal = modal;
    }, function(err) {
    $scope.upload = function() {
       console.log($scope, $;
    $scope.openUpload = function() {

When I filled in some in the input, and clicked the button, which calls upload method, the $ is always {"url":""}. I read similar posts, which suggest using an object and here I am using one. And when I checked the scope hierarchy, I can find that data is in the parent scope (3 levels up).

Any idea where is the problem?

Thanks very much.


You should use complete reference name.


@siddhartha Can you please elaborate a bit? I tried using ng-model=$, still does not work.


Never mind, I was using ng-modal=data.url instead of ng-model=data.url :joy: