change css property on every click with angularjs

Problem

Check this Link, I am trying to change Margin each time a user click on Button. I am able to change background property, don't know what going wrong with Margin property.

Here is what I am trying to achieve:

  1. The margin should be modified on each click not just once. So in first click if my left margin is 20px, in second click it will be 40px and so on.
  2. After reaching to a specific margin(i.e. 200px) button should be disappear/disable.

I know this can be done,but as I am new to angular not able to figure out?

HTML

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
</head>

<body>
  <div ng-app>
  <p ng-style="myStyle">:( Margin will play with me</p>
  <input type="button" value="Margin Change(Not Working)" ng-click="myStyle={margin-left:'20px'}" />
  <span><bold>Please note margin should be changed on each click</bold></span>
  <input type="button" value="BG Change Working" ng-click="myStyle={background:'red'}" />
    <ul>
    <li> <a href="#">Home</a>

    </li>
    <li> <a href="#">About</a>

    </li>
    <li> <a href="#">Contact</a>

    </li>
    <li> <a href="#">Home</a>

    </li>
    <li> <a href="#">About</a>

    </li>
    <li> <a href="#">Contact</a>

    </li>
    <li> <a href="#">Home</a>

    </li>
    <li> <a href="#">About</a>

    </li>
    <li> <a href="#">Contact</a>

    </li>
</ul>

CSS

 .changeColor {
 color:blue;
 }
 .changeSize {
 font-size:30px;
 }
 .italic {
 font-style:italic;
 }
 ul {
 list-style:none;
 margin:0;
 padding:0;
 }
 li {
 float:left;
 }
 li + li {
 border-left:1px solid #ccc;
 }
 a {
 display:block;
 padding:7px 10px;
 color:#222;
 background:#eee;
 text-decoration:none;
 }
 a:hover {
 color:#fff;
 background:#666;
 }
 a:active {
 color:#fff;
 background:#0090cf;
 }
Problem courtesy of: ankitd

Solution

Hi please see here:http://plnkr.co/edit/vNpUQh0TV8qGCifpJofa?p=preview You need to move logic functions into controller.

JS:

app.controller('MainCtrl', function($scope) {
  $scope.margin = 0;
  $scope.showbutton = true;
  $scope.addMargin = function() {


    $scope.margin += 20;
    if ($scope.margin < 200) {
      $scope.myStyle = {
        'margin-left': $scope.margin + 'px'

      }
    } else {
      $scope.showbutton = false;


    }
  }
});

HTML

 <input type="button" value="Margin Change(Not Working)" ng-click="addMargin()"  />
Solution courtesy of: sylwester

Discussion

Point 1:

You need to change:

ng-click="myStyle={margin-left:'20px'}"

to

ng-click="myStyle={'margin-left':'20px'}"

Since some CSS style names are not valid keys for an object, they must be quoted.

Point 2:

You can link a function to ng-click

ng-click="clickFunction()"

like

var addMargin = 0;
$scope.clickFunction= function(){
  if(addMargin == 200){
    $scope.styleButton = {display:'none'};
  }
  addMargin = addMargin +20;
  $scope.styleMargin = {'margin-left': addMargin+'px'};
};

And use styleButton / styleMargin in your ng-style tags

Discussion courtesy of: Pierre

This recipe can be found in it's original form on Stack Over Flow.