Access AngularJS expression with ng-click

Question

I am having trouble to access angularjs expressions after the click event.

index.html

<div class="row">
    <a href="#/company"><div class="tile col col-comp cat-a-g grow-appear" ng-click="onSelect(item)" ng-repeat="item in data" >
        <p>{{item.compname}}</p>
    </div></a>
</div>

The above code populate a list of company names. When I click on a company it opens company.html

company.html

<div class="comp-info col s12 grow-appear">
   <span class="comp-logo-container">
      <img src="images/aap3-160x70-black.jpg" />
   </span>
   <span class="comp-info-container">
      <p><i class="far fa-envelope"></i>{{item.compemail}}</p>
      <p><i class="fas fa-location-arrow"></i>{{item.compbuilding}}</p>
      <p><i class="fas fa-phone"></i>{{item.compphone}}</p>
   </span>
</div>

Controller (app.js)

$scope.onSelect = function($event, data) {
   console.log(data);
}

File Structure

root
    +--public
        +--templates
            +--company.html
            +--index.html
        +--javascript
            +--app.js
    +--views
        +main.html

I am using ngRoute to inject index.html and company.html into main.html.

app.config(function($routeProvider){
    $routeProvider

    .when ('/', {
         templateUrl: 'templates/home.html',
         controller: 'AppCtrl'
    })

    .when ('/company', {
         templateUrl: 'templates/company.html',
         controller: 'AppCtrl'
    })
});

So when I console.log() the controller, it shows the array of data but it doesn't add it to the company html document. What am I missing?

Answer 1

The structure of your application is a little unclear, but I think your problem may be to do with $scope. item in item in data is not accessible from the root of $scope. You can do something like this:

<div class="comp-info col s12 grow-appear">
   <span class="comp-logo-container">
       <img src="images/aap3-160x70-black.jpg" />
   </span>
   <span class="comp-info-container">
       <p><i class="far fa-envelope"></i>{{selected.compemail}}</p>
       <p><i class="fas fa-location-arrow"></i>{{selected.compbuilding}}
       </p>
       <p><i class="fas fa-phone"></i>{{selected.compphone}}</p>
   </span>
</div>

Then:

$scope.onSelect = function($event, data) {
  $scope.selected = data;
}