Onsen UI 最小限のテンプレートに下記URLを参考にした検索を組み込みたいのですが
競合してしまっているのかonsenui、検索システムどちらかしか動きません。
http://www.walbrix.com/jp/blog/2014-01-angularjs-resource.html
<html lang="ja" ng-app="MyApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="components/monaca-onsenui/css/onsenui.css">
<link rel="stylesheet" href="components/monaca-onsenui/css/onsen-css-components.css">
<script src="components/monaca-onsenui/js/angular/angular.js"></script>
<script src="components/angular-resource/angular-resource.min.js"></script>
<script src="components/monaca-onsenui/js/onsenui.js"></script>
<script language="javascript">
//以下2行を消すとjsonの内容が表示される(検索システムは動く)
var module = ons.bootstrap('MyApp', ['onsen']);
module.controller('AppController', function($scope) { });
//以下を消すとonsenuiが反映される(検索システムは動かない)
var app = angular.module('MyApp', ['ngResource']);
app.controller('MyController', ['$scope','$resource',function($scope,$resource) {
var contents = $resource('./contents2.json');
$scope.contents = contents.query();
}]);
</script>
<title>素材検索</title>
</head>
<body>
<!--トップページ-->
<ons-navigator title="Navigator" var="myNavigator">
<ons-page>
<ons-toolbar>
<div class="center">検索</div>
</ons-toolbar>
<br>
<div class="container" ng-controller="MyController">
<input type="test" class="search-input" style="width: 96%; margin: 10px auto;" placeholder="Search" ng-model="postalNumber">
<dl class="dl-horizontal">
<dt ng-repeat-start="entry in contents | filter:postalNumber">{{entry[0]}}({{entry[2]}})</dt>
<dd ng-repeat-end>{{entry[3]}}</dd>
</dl>
</div>
</ons-page>
</ons-navigator>
</body>
</html>
contents2.jsonは以下のような記載としています。
[
["素材名","素材種類","素材説明1","素材説明2"]
]
ご教示いただけますと幸いです。
よろしくお願いいたします。