I am new to Onsen UI and AngularJS, and I have a simple question about data binding. When I use the variable $scope.name with ng-model in an Onsen UI template, it returns as UNDEFINED. Here is my code:
<!doctype html>
<html lang="en" ng-app="simpleKamus">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="lib/onsen/css/onsenui.css"/>
<link rel="stylesheet" href="lib/onsen/css/onsen-css-components.css"/>
<script src="lib/onsen/js/angular/angular.js"></script>
<script src="lib/onsen/js/angular/angular-route.js"></script>
<script src="lib/onsen/js/onsenui.js"></script>
<script>
var nameApp=angular.module('simpleKamus',['onsen']);
nameApp.controller('KamusCtrl',['$scope','$http',function ($scope,$http){
$scope.tes=function(){
alert($scope.name);
};
}]);
</script>
</head>
<body ng-controller="KamusCtrl">
<ons-tabbar>
<ons-tab page="english.html" label="English - Indonesia" icon="ion-chatbox-working" active="true"></ons-tab>
<ons-tab page="indo.html" label="Indonesia - English" icon="ion-chatbox-working"></ons-tab>
</ons-tabbar>
<ons-template id="english.html">
<ons-toolbar>
<div class="center">ENGLISH - INDONESIA</div>
</ons-toolbar>
<input type="text" ng-model="name" class="text-input text-input--transparent" placeholder="name" style="width: 100%">
<button ng-click="tes()">tes</button>
</ons-page>
</ons-template>
</body>
</html>
When I click the "tes" button, why does $scope.name return as UNDEFINED? If I remove all of Onsen's tags and only leave the HTML tag, the variable $scope.name is defined. I have tried the solutions provided in this link, but they did not solve the problem. Thank you for your help.