Onsen-UIの検索テキストコントロール(Search Input)内に文字をクリアするボタンをつけたいです。下記サイトを参考にしましたが、ボタンがコントロール外に表示されてしまいます。アドバイスを頂ければ幸いです。
参考ページ
https://stackoverflow.com/questions/21708689/clear-text-input-on-click-with-angularjs
実装コード
<!DOCTYPE HTML>
<html ng-app = "myApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
<script src="components/loader.js"></script>
<script src="js/winstore-jscompat.js"></script>
<link rel="stylesshet" href="components/monaca-onsenui/js/angular/angular-csp.css">
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<script>
var app = angular.module("myApp", ['onsen']);
app.controller("myCtrl", function ($scope) {
$scope.searchAll = "";
$scope.clearSearch = function () {
$scope.searchAll = "";
};
});
</script>
</head>
<body ng-controller="myCtrl">
<ons-navigator var="myNavigator" page="main.html">
</ons-navigator>
<ons-template id = "main.html">
<ons-toolbar>
<div class="left"><ons-toolbar-button><ons-icon icon="fa-trash-o"></ons-icon></ons-toolbar-button></div>
<div class="center">
<input id="searcharea" type="search" class="search-input" ng-model="searchAll">
<a class="clear" ng-click="searchAll = null">
<ons-icon icon="fa-times-circle-o"></ons-icon>
</a>
</div>
<div class="right"><ons-toolbar-button><ons-icon icon="fa-plus"></ons-icon></ons-toolbar-button></div>
</ons-toolbar>
<form>
<textarea class="textarea" placeholder="テキストを入力" rows="15" ng-model="text"></textarea>
<button class="button button--large">Button</button>
</form>
</ons-template>
<style>
#searcharea{
margin-top: 5px
}
.textarea{
width: 100%;
}
.button{
margin-top: 10px;
}
</style>
</body>
</html>