Angularjs ng-click not working in laravel #PHP - php

Question

I have just created a very simple app. It only contains one function which is used in ng-click. Somehow, ng-click is not firing. Can anyone take a look for me?
<div class="form-inline">
<label for="primary" style="padding-right:5px">Primary skill </label>
<select id="primary" class="form-control" ng-model="primary" id="primary" ng-options="s.skill_name for s in skills| excludeFrom:secondary"></select>
<label for="secondary">Secondary skill </label>
<select id="secondary" class="form-control " id="secondary" ng-model="secondary" ng-options="s.skill_name for s in skills| excludeFrom:primary"></select>
<div ng-controller="profileController">
<input type="button" value="Search" class="mx-sm-3 btn btn-primary" ng-model="searchbtn" name="search" ng-click="profileController.getprofile()">
<table class="table" id="myTable">
<tr>
<th>Full name</th>
<th>Email</th>
<th>City</th>
<th>Primary skill1</th>
<th>Primary skill2</th>
<th>Primary skill3</th>
<th>Secondary skill1</th>
<th>Secondary skill2</th>
<th>Secondary skill3</th>
<th>Secondary skill4</th>
<th>Secondary skill5</th>
</tr>
<tr ng-repeat="p in profiles">
</tr>
</table>
</div>
</div>
<script>
function profileController($scope, $http) {
$scope.getprofile = function() {
var pskill = $("#primary").val();
var skill = $("#secondary").val();
$http({
url: "{{PROFILE_REPOSITORY}}",
method: "POST",
data: { "_token": { { csrf_token() } }, 'primary': pskill, 'secondary': skill },
}).then(function(response) {
$scope.profiles = response.data;
console.log(response.data);
}),
function(response) {
console.log('failed');
}
}
}
</script>

Answer 1

<div class="form-inline">
<label for="primary" style="padding-right:5px">Primary skill </label>
<select id="primary" class="form-control" ng-model="primary" id="primary" ng-options="s.skill_name for s in skills| excludeFrom:secondary"></select>
<label for="secondary">Secondary skill </label>
<select id="secondary" class="form-control " id="secondary" ng-model="secondary" ng-options="s.skill_name for s in skills| excludeFrom:primary"></select>
<div ng-controller="profileController">
<input type="button" value="Search" class="mx-sm-3 btn btn-primary" ng-model="searchbtn" name="search" ng-click="getprofile()">
<table class="table" id="myTable">
<tr>
<th>Full name</th>
<th>Email</th>
<th>City</th>
<th>Primary skill1</th>
<th>Primary skill2</th>
<th>Primary skill3</th>
<th>Secondary skill1</th>
<th>Secondary skill2</th>
<th>Secondary skill3</th>
<th>Secondary skill4</th>
<th>Secondary skill5</th>
</tr>
<tr ng-repeat="p in profiles">
</tr>
</table>
</div>
</div>
<script>
function profileController($scope, $http) {
$scope.getprofile = function() {
var pskill = $("#primary").val();
var skill = $("#secondary").val();
$http({
url: "{{PROFILE_REPOSITORY}}",
method: "POST",
data: { "_token": { { csrf_token() } }, 'primary': pskill, 'secondary': skill },
}).then(function(response) {
$scope.profiles = response.data;
console.log(response.data);
}),
function(response) {
console.log('failed');
}
}
}
</script>