When click button value not update in angular js

Question

This html code :

<md-button class="md-primary " ng-click="setDevice('phone')">Phone           
        </md-button>
<md-button class="md-primary " ng-click="setDevice('tablet')">
           Tablet
        </md-button>

<div class="area-{{setDevice}}">
    <me-iphone tmp-url="{{appTemplateUrl}}"></me-iphone>
</div>

First Time When Click Phone or Tablet Button Update setDevice Value

$scope.setDevice = "";
$scope.setDevice = function(setDevice){
            $scope.setDevice = setDevice;
        }

The problem is (First Click phone), When Click Tablet Button Not update setDevice Value

When click both button, hope to update $scope.setDevice Value

Answer 1

Although, your line of thinking is correct, you've messed it up a little bit in syntax. :) Which is okay and an essential step in learning.

In your code, you have declared your setDevice , first, as a string and then as a function. Becuase the last assignment is a function, your $scope.setDevice is no longer a string, but a function.

Change the name of the variable to something else and it will work fine.

$scope.currentDevice = "";
$scope.setDevice = function(setDevice){
    $scope.currentDevice = setDevice;
}

And in your HTML

<md-button class="md-primary " ng-click="setDevice('phone')">Phone</md-button>
<md-button class="md-primary " ng-click="setDevice('tablet')">Tablet</md-button>

<div class="area-{{currentDevice}}"> <!-- THIS NEEDS TO BE UPDATED AS WELL -->
    <me-iphone tmp-url="{{appTemplateUrl}}"></me-iphone>
</div>

Answer 2

Use your code just like this:

$scope.setDevice = function(setDevice){
   return setDevice;
}