Get input value from onsen dialog

Question

I've been following an example in http://codepen.io/onsen/pen/zxxaGa. However, I can't figure out how I can get the input text (username, email) from the dialog after I click the button.

<ons-page>
<ons-toolbar>
 <div class="center">Dialog</div>
</ons-toolbar>
<ons-list ng-controller="DialogController">
<ons-list-item ng-click="show('login.html')" modifier="tappable">
 Login form
</ons-list-item>
</ons-list>
</ons-page>

<ons-template id="login.html">
<ons-dialog var="dialog" cancelable>
  <ons-toolbar inline>
    <div class="center">
      Login
    </div>
  </ons-toolbar>    
  <p>
    <input placeholder="Username" id="username" class="text-input">
  </p>    
  <p>
    <input type="password" placeholder="Password" id="username" class="text-input">
  </p>
  <p>
    <ons-button modifier="large" ng-click="dialog.hide()">Sign in</ons-button>
  </p>
 </ons-dialog> 
</ons-template>

Answer 1

This is actually an AngularJS question. login.html has no controller, so create one and provide it with ng-controller. After that, use ng-model in the inputs.

<ons-template id="login.html">
  <ons-dialog var="dialog" cancelable ng-controller="MyController">
    ...
    <input id="username" ... ng-model="username">
    ...

Username will be stored in $scope.username inside MyController.