how to switch to another view using css class on click in angularjs using ngclass

I want to change the middle view of the current view when the links are clicked. one link is to view the iphone and the other one is to view the tablet. Default view should be iphone. Other than that anything in the view should not be changed with the click. I don't want to toggle between the views. Just load the view with the click on the link.

Below is the html code which I tried.

<div class="mobile-area">
                <p>Mobile App</p>
                <a class="mobile-icon current-device" href ng-click="iphoneView= !iphoneView"></a>
                <a href ng-click="tabletView = !tabletView" class="tablet-icon"></a>
            </div>
<div class="mobile-preview" ng-class="{'iphone': iphoneView}">
            <div class="mobile-wrapper">
                <div class="mobile-simulator">
                    <me-iphone tmp-url="{{appTemplateUrl}}"></me-iphone>
                </div>
            </div>
        </div>

        <div class="mobile-preview" ng-class="{'tablet': tabletView}">
                <div class="mobile-wrapper">
                    <div class="mobile-simulator">
                        <me-tablet tmp-url="{{appTemplateUrl}}"></me-tablet>
                    </div>
                </div>
        </div>

Below is the css code.

.iphone {
    position: relative;
    background: url(../../../../images/iphone-bg.png) no-repeat;
    width: 100%;
    height: 100%;
    padding-top: 58%;
    border-radius: 1em;
    float: none;
}

 .tablet {
        position: relative;
        background: url(../../../../images/tablet.jpg) no-repeat;
        width: 200%;
        height: 100%;
        padding-top: 58%;
        border-radius: 1em;
        float: none;
    }

I tried different methods but nothing is working for me. Please tell me a way to load the views without toggling to the same html page.

Solution

Try this?

<div class="mobile-area">
    <p>Mobile App</p>
    <a class="mobile-icon current-device" href ng-click="iphoneView=true;tabletView=false"></a>
    <a href ng-click="tabletView=true;iphoneView=false" class="tablet-icon"></a>
</div>

<div class="mobile-preview" ng-class="{'iphone': iphoneView, 'tablet': tabletView}">
    <div class="mobile-wrapper">
        <div class="mobile-simulator">
            <me-iphone ng-show="iphoneView" tmp-url="{{appTemplateUrl}}"></me-iphone>
            <me-tablet ng-show="tabletView" tmp-url="{{appTemplateUrl}}"></me-tablet>
        </div>
    </div>
</div>

EDIT: according to karaxuna's answer, you can use just one variable

<div class="mobile-area">
    <p>Mobile App</p>
    <a class="mobile-icon current-device" href ng-click="tabletView=false"></a>
    <a href ng-click="tabletView=true" class="tablet-icon"></a>
</div>

<div class="mobile-preview" ng-class="tabletView ? 'tablet' : 'iphone'">
    <div class="mobile-wrapper">
        <div class="mobile-simulator">
            <me-iphone ng-show="!tabletView" tmp-url="{{appTemplateUrl}}"></me-iphone>
            <me-tablet ng-show="tabletView" tmp-url="{{appTemplateUrl}}"></me-tablet>
        </div>
    </div>
</div>