How to set the data inside an AngularJS scope?

Question

I want to set the data inside the scope once it is active. I have a show/hide menu on the html page when I click a button and it shows data from that click, so I want to set that data inside this scope. Please correct anything if I am not wording the problem correctly.

Here is my js:

app.controller('PaymentMethodsCtrl' , [ '$scope','$http',function($scope, $http){
$scope.active = true;
$scope.showCardDetails = function() {
    $scope.active = !$scope.active;

    //test for the data
    //if scope.active{
        //set data here..
    //}


}                  
}]);

And here is the code for the content that appears/hides with the click function:

<div align="center" id="content-content" ng-class="{'sub-nav' : active}" class="card-details" style="background-color: #939393">

    <div class="row" align="center">

        <div class="col-sm-6"  align="center">
            <span><h6 class="payment-section-header-title">name on card</h6></span>
        </div>

        <div class="col-sm-6" align="center">
            <span><h6 class="payment-section-header-title">billing address</h6></span>
        </div>  

    </div>

    <div class="row" align="center">

        <div class="col-sm-6" align="center">
            <span><h6 class="payment-item-title">Jonny Smith</h6></span>
        </div>

        <div class="col-sm-6" align="center">
            <span><h6 class="payment-item-title">Jonny Smith
            <br />
            123 Fake Street
            <br />
            Township, NJ
            <br />
            201-555-5554

            </h6></span>
        </div>

        <div class="col-sm-5" align="center">
            <h6><button type="button" align="center">Edit</button>
            </h6>               
        </div>

        <div class="col-sm-1" align="center">
            <h6><button type="button" align="center">Delete</button>
            </h6>               
        </div>

    </div>

</div>

This is the data I want within the scope. The name of the person and the billing address for example.

UPDATED:

Here is where I am setting the showCardDetails method:

<div class="col-sm-4"  align="center">
            <span ng-click="showCardDetails()" id="v-btn">V</span>
        </div>

Answer 1

So, if you want to set the data inside the scope once it is active, check if the scope is active, and then set the data

app.controller('PaymentMethodsCtrl' , [ '$scope','$http',function($scope, $http){
$scope.active = true;
$scope.showCardDetails = function() {
    $scope.active = !$scope.active;

   //check if scope is active
   if($scope.active == true) {
       // now set data
        $scope.name = "some name";
        $scope.billingAddress = "the address...";
   }
}                  
}]);

And if the data is provided by the user/client by some input text field, you can also update your scope variable by using ng-model directive.