jepetko/jsbin.EvAnIwIs.css

## jsbin.EvAnIwIs.css

#weather {
  font-size: 20px;
  font-weight: bold;
  border: 2px solid black;
  padding: 20px;
}


.rainy {
 background: blue;
 color: white;
}

.rainy:after {
  content: ' I need an umbrella. Its rainy.';
}

.sunny {
 background: yellow;
 color: black;
}

.sunny:after {
  content: ' The sun is shining. Thats pretty.'
}

.hot {
  background: red;
  color: white;
}

.hot:after {
  content: ' Its extremely hot here!';
}

.cold {
  background: white;
  color: grey;
}

.cold:after {
  content: ' Its winter. Brrrr....'
}

## jsbin.EvAnIwIs.html
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<meta name="description" content="AngularJS Directives" />
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>

  <div id="weather-app" ng-app="weatherApp">
      The following div is able to tell you the weather.
      <div id="weather" data-add-weather-forcast>Your forcast! </div>
  </div>

</body>
</html>

## jsbin.EvAnIwIs.js
var weatherApp = angular.module('weatherApp',[]);

weatherApp.directive('addWeatherForcast', function($timeout) {
    return function(scope,element, attrs) {
        $timeout(function() {

          var forcasts = [ 'rainy', 'sunny', 'hot', 'cold' ];

          var random = Math.floor(Math.random() * forcasts.length);

          element.removeClass();
          var el = $(element);
          el.addClass(forcasts[random]);

        }, 500);
    };
});

	#weather {
	font-size: 20px;
	font-weight: bold;
	border: 2px solid black;
	padding: 20px;
	}


	.rainy {
	background: blue;
	color: white;
	}

	.rainy:after {
	content: ' I need an umbrella. Its rainy.';
	}

	.sunny {
	background: yellow;
	color: black;
	}

	.sunny:after {
	content: ' The sun is shining. Thats pretty.'
	}

	.hot {
	background: red;
	color: white;
	}

	.hot:after {
	content: ' Its extremely hot here!';
	}

	.cold {
	background: white;
	color: grey;
	}

	.cold:after {
	content: ' Its winter. Brrrr....'
	}
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
	<meta name="description" content="AngularJS Directives" />
	<meta charset=utf-8 />
	<title>JS Bin</title>
	</head>
	<body>

	<div id="weather-app" ng-app="weatherApp">
	The following div is able to tell you the weather.
	<div id="weather" data-add-weather-forcast>Your forcast! </div>
	</div>

	</body>
	</html>
	var weatherApp = angular.module('weatherApp',[]);

	weatherApp.directive('addWeatherForcast', function($timeout) {
	return function(scope,element, attrs) {
	$timeout(function() {

	var forcasts = [ 'rainy', 'sunny', 'hot', 'cold' ];

	var random = Math.floor(Math.random() * forcasts.length);

	element.removeClass();
	var el = $(element);
	el.addClass(forcasts[random]);

	}, 500);
	};
	});