ng-click not working in AngularJS, Cordova - angularjs

Question

We are writing an application in Ionic, Cordova, AngularJS.
My code is here https://jsfiddle.net/sweety1112/wag7ye4b/1/
My problem is that ui-sref or ng-click is not working as expected. Are there any errors?
$stateProvider
.state('app', {
url: '',
abstract: true,
templateUrl: 'HomePage.html'
})
.state('app.home', {
url: '/home',
templateUrl:'templates/HomeScreen.html',
controller: 'HomePageCtrl'
})
.state('app.scan',
{ parent:'app',
url: '/scan',
templateUrl: 'templates/Scan.html'
// controller: 'SettingsController'
})
.state('app.help', {
url: '/help',
templateUrl:'templates/Help.html'
})
In HTML i have
$scope.funOne=function(){
alert("Button Clicked"); };
Then this should be called from the html
<div> <br/><br/><br/><br/><br/><br/><div ng-click="funOne()"><h1> Home Screen</h1> </div>
<div class="centerButton" ng-click="funOne()">
<a ui-href="app.help"> <img src='assets/img/start_btn.png'/> </a>
<p>START</p>
</div>
ng-click is working from the div which has Home Screen but it is not working on Image. Even ui-sref is not working on the image.

Answer 1

Updated the fiddle with the css classes as well changed the ng-click position. Your css is conflicting with the ng-click and hence needs to be at the parent level.
Updated Fiddle
Css Changed:
.bar-positive {
background-color: #C12537;
border: none;
}
.container {
width:550px;
height:550px;
position:relative;
z-index: -1;
display:block;
}
.container .left, .right div p {
top: 44%;
left: -14%;
}
.container .right {
transform: rotate(90deg);
}
.rotate div p {
position:absolute;
margin:0;
padding:0;
font-family:'Roboto';
font-size: 22px;
color: #FFFFFF;
top:27%;
left:20%;
}
.text {
transform: rotate(360deg);
}
.container img {
position:absolute;
}
.rotate img {
width:100%;
/*-webkit-transform-origin: 70% 105%;*/
z-index: -1;
position:relative;
}
.rotate {
width:72%;
transition: transform 0.5s linear;
transform-origin: 70% 105%;
position:absolute;
}
.bottom img {
/*-webkit-transform: rotate(180deg);*/
z-index: -1;
margin-top: 308px;
margin-left: 141px;
transform: rotate(180deg);
}
.left img {
transform: rotate(270deg);
z-index: -1;
}
.right img {
/*-webkit-transform: rotate(90deg);*/
z-index: -1;
}
.rotate.right div p {
top:22%;
left:9%;
transform: rotate(270deg);
}
.rotate.bottom div p {
position: absolute;
margin: 0;
padding: 0;
font-family:'Roboto';
font-size: 22px;
color: #FFFFFF;
top: 79%;
left: 100%;
}
.rotate.left div p {
top:78%;
left:26%;
transform: rotate(360deg);
}
/*New style**/
.rotate div {
position: absolute;
padding:0;
margin:0;
width:100%;
height:100%;
left:0;
right:0;
top:0;
bottom:0;
transition: transform 0.5s linear;
}
.flex-container {
height: 100%;
padding: 0;
margin: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.centerButton img, .centerButton p {
position:absolute;
width:100%;
top:-50%;
left:-50%;
right:-50%;
bottom:-50%;
margin:auto;
}
.centerButton p {
height:10%;
text-align:center;
font-family:'Roboto';
font-size: 22px;
color: #FFFFFF;
}
.centerButton {
width:50%;
height:50%;
margin:auto;
position:absolute;
top:-45%;
left:-50%;
right:-52%;
bottom:-50%;
}
UPDATE:
Your z-index in the css class was giving the issue. Corrected that in the updated fiddle
CSS for reference:
.bar-positive {
background-color: #C12537;
border: none;
}
.container {
width:550px;
height:550px;
position:relative;
z-index: 9999;
display:block;
}
.container .left, .right div p {
top: 44%;
left: -14%;
}
.container .right {
transform: rotate(90deg);
}
.rotate div p {
position:absolute;
margin:0;
padding:0;
font-family:'Roboto';
font-size: 22px;
color: #FFFFFF;
top:27%;
left:20%;
}
.text {
transform: rotate(360deg);
}
.container img {
position:absolute;
}
.rotate img {
width:100%;
/*-webkit-transform-origin: 70% 105%;*/
z-index: 9999;
position:relative;
}
.rotate p {
z-index:9999;
}
.rotate {
width:72%;
transition: transform 0.5s linear;
transform-origin: 70% 105%;
position:absolute;
}
.bottom img {
/*-webkit-transform: rotate(180deg);*/
z-index: 9999;
margin-top: 308px;
margin-left: 141px;
transform: rotate(180deg);
}
.left img {
transform: rotate(270deg);
z-index: 9999;
}
.right img {
/*-webkit-transform: rotate(90deg);*/
z-index: 9999;
}
.rotate.right div p {
top:22%;
left:9%;
transform: rotate(270deg);
}
.rotate.bottom div p {
position: absolute;
margin: 0;
padding: 0;
font-family:'Roboto';
font-size: 22px;
color: #FFFFFF;
top: 79%;
left: 100%;
}
.rotate.left div p {
top:78%;
left:26%;
transform: rotate(360deg);
}
/*New style**/
.rotate div {
position: absolute;
padding:0;
margin:0;
width:100%;
height:100%;
left:0;
right:0;
top:0;
bottom:0;
transition: transform 0.5s linear;
}
.flex-container {
height: 100%;
padding: 0;
margin: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.centerButton img, .centerButton p {
position:absolute;
width:100%;
top:-50%;
left:-50%;
right:-50%;
bottom:-50%;
margin:auto;
}
.centerButton p {
height:10%;
text-align:center;
font-family:'Roboto';
font-size: 22px;
color: #FFFFFF;
}
.centerButton {
width:50%;
height:50%;
margin:auto;
position:absolute;
top:-45%;
left:-50%;
right:-52%;
bottom:-50%;
}