Toggle 2 classes via Angular - html

Question

I'm trying to toggle between 2 classes via Angular's ng-Click & ng-Class selectors.
Basically, I want to click 1 line of text, or a button, or whatever, and change the z-index of an element by switching the styles using ng-Click.
I've tried multiple solutions but virtually none of them are working. I'm not entirely sure whether its something I'm doing wrong with Angular, or maybe my CSS?
Angular:
app.controller("naviController",function($scope){
"use strict";
$scope.toggles = [{ state: true }, { state: false }, { state: true }];
});
HTML:
<div ng-controller="naviController">
<div class="nav-container">
<div class="nav-element-block ne-1" ng-click="toggle.state = !toggle.state">Index</div>
<div class="nav-element-block ne-2" ng-click="toggle.state = !toggle.state">About</div>
<div class="nav-element-block ne-3" ng-click="toggle.state = !toggle.state">Dev</div>
</div>
<div id="index-container" ng-class="{'about-container-active' : toggle.state}">Index Container</div>
<div id="about-container" ng-class="{'about-container-active' : toggle.state}">About Container</div>
<div id="dev-container" ng-class="{'about-container-active' : toggle.state}">Dev Container</div>
</div>
CSS:
#index-container {
display: table-cell;
width: 100vw;
height: 90vh;
padding-top: 10vh;
background-color: #FFF;
overflow: hidden;
animation-name: indexcell;
animation-duration: 500ms;
box-sizing: border-box;
padding-left: 5%;
padding-right: 5%;
z-index: 5;
position: fixed;
}
.index-container-active {
z-index: 999;
}
#about-container {
display: table-cell;
width: 100vw;
height: 90vh;
padding-top: 10vh;
background-color: #f1ffff;
overflow: hidden;
animation-name: indexcell;
animation-duration: 500ms;
padding-left: 5%;
padding-right: 5%;
z-index: 4;
position: fixed;
}
.about-container-active {
z-index: 999;
}
#dev-container {
display: table-cell;
width: 100vw;
height: 90vh;
padding-top: 10vh;
background-color: #f1fff1;
overflow: hidden;
animation-name: indexcell;
animation-duration: 500ms;
padding-left: 5%;
padding-right: 5%;
z-index: 3;
position: fixed;
}
.dev-container-active {
z-index: 999;
}
What I'm actually trying to do: I have 5 divs whose class I'd like to change with, lets say 5 links and when I click one of the links I'd like to switch that related class on, and the others off. Like:
Index = Class-1-Active
About = Class-2-Inactive
Dev = Class-3-Inactive
Contact = Class-4-Inactive
Portfolio = Class-5-Inactive
Lets say we click on 'Dev', this then switches class 3 into an active state, by switching classes, and then switches all the other classes to an inactive state. Like so:
Index = Class-1-Inactive
About = Class-2-Inactive
Dev = Class-3-Active
Contact = Class-4-Inactive
Portfolio = Class-5-Inactive

Answer 1

There are multiple errors in your code, as the guys pointed out you're having a typo, but just that won't resolve your issues.
I'd go from start, as everything in angularjs there are many ways to do same thing. This is just one simple proposal, first your html would require ng-click to go in some kind of function in which you will change state of the active:
<button class="nav-element-block ne-1" ng-click="toggleState('index')">Index</button>
<button class="nav-element-block ne-2" ng-click="toggleState('about')">About</button>
<button class="nav-element-block ne-3" ng-click="toggleState('dev')">Dev</button>
next you need to figure out which state is which, so fix your object of states to something like this:
let toggles = [{
name: 'dev',
state: false
}, {
name: 'about',
state: false
}, {
name: 'index',
state: true
}];
and you need to create that function on $scope that you are calling on that div/button click. It will set state to false to all other objects except one named state:
$scope.toggleState = function(state) {
toggles = toggles.map(val => {
if (val.name === state) {
val.state = true;
} else {
val.state = false;
}
return val;
});
};
Then you need to assign function that will check on your divs to trigger a class by a certain div name:
<div id="index-container" ng-class="{'about-container-active' : checkActiveState('index')}">Index Container</div>
<div id="about-container" ng-class="{'about-container-active' : checkActiveState('about')}">About Container</div>
<div id="dev-container" ng-class="{'about-container-active' : checkActiveState('dev')}">Dev Container</div>
And in the end you need a function that will search that div name in your toggles array and return .state of that object and that will actually trigger your class:
$scope.checkActiveState = function(state) {
return toggles.find(x => x.name === state).state;
};
And voila, that's it, if you have any issues let me know, here's fiddle so you can play around with it: https://jsfiddle.net/pegla/mvprL5ap/1/