I'm a beginner to AngularJS and I'm struggling to understand why I'm not getting a response when clicking the button. Any help would be greatly appreciated. I've reviewed other examples of controllers being used but I can't seem to pinpoint where my mistake is.
Update: I have two scripts that work independently, but when combined they result in this error: [$injector:unpr] Unknown provider: searchNameFilterProvider <- searchNameFilter
<html lang="en" ng-app="myApp" >
<head>
<meta charset="utf-8">
<title>My AngularJS App</title>
<link rel="stylesheet" href="css/app.css"/>
</head>
<body>
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
-->
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
Find Person: <input type="text" ng-model="myName">
<ul ng-init="people = ['Diarmuid','Aine','Dave','Declan']">
<li ng-repeat="person in people | filter:myName">{{ person | searchName}}</li>
</ul>
<script>
var app = angular.module('myApp',[]);
app.filter('searchName',function(){
return function (input){
return input + '!';
}
})
</script>
<div ng-controller="myCtrl">
<button ng-click="myFunc()">Hello World Button</button>
</div>
<script>
var app = angular.module('myApp',[]);
app.controller('myCtrl',function ($scope) {
$scope.myFunc = function () {
console.log('Hello world!');
};
});
</script>